Stack Overflow
Stack Overflow

How can I hide a `. – Blaise Jun 12 '14 at 08:46

  • 1
    `-moz-appearance: none` works again in Fx 35b. – Blaise Jan 14 '15 at 10:32
  • `-moz-appearance: window;` works for me. – Bruno Wego Mar 27 '16 at 16:05

    • 6 Answers6

    4

    I fixed my this issue by giving some style to div and select individually.

    Anyone can change his width and other style properties a/c to needs. :)

    Here is the js fiddle for it. JSFIDDLE

    <div  class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
    <option>
        apple
    </option>
    <option>
        blackberry
    </option>
    <option>
       pumpkin
    </option>
</select>


    .common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
overflow: hidden; 
width: 220px;  }

.common-dropdown-project-select{
  width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;    
 background-repeat: no-repeat;
background-size: 25px 16px;
border: none  ! important;    
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none; }

select::-ms-expand {
display: none;}
    Rajdeep
    • 788
    • 7
    • 26
    2

    Put the select in another container which has overflow: hidden;, make the select wider than the container. If you want a border, add it to the container.

    An example is the select at the bottom of this page: https://mozillians.org/en-US/

    Constantin Groß
    • 10,719
    • 4
    • 24
    • 50
    Mircea.c
    • 45
    • 3
    • This approach doesn't work (if I am not missing something) when you do not know in advance how long the options will be. The code snippet in the question allowed for a fixed-size select box with a drop-down box that adjusted its width automatically to the longest option. – Matthias Jun 23 '14 at 11:28
    1

    You can use this solution for firefox, using vendor pseudo class :-moz-any() and pointer events only for mozilla and do not affect other browsers, because both is valid since version 3.6.

    here is a jsbin example http://jsbin.com/pozomu/4/edit

    0

    /* For mozilla Firefox 30.0+ I used the following to coverup the reappearing arrow: */

    @-moz-document url-prefix() {

    .yourClass:after {
    position: absolute;
    margin-left: -25px;
    border-radius: 4px;
    content: url('../images/pathToYourDownArrowImage.svg');
    pointer-events: none;
    overflow: hidden;
}

    /* I still use this to move the text over */

    .yourClass select {
    text-overflow: '';
    text-indent: -1px;
    -moz-appearance: none;
    background: none;
}

    }

    Todd Bruss
    • 21
    • 3
    0

    Firefox > 29 -moz-appearance:none; working, But have a problem with width, we extend the width of select from 100 to 110% to hide, but it affects the design of a forms, So i just hide it with a div and over come it,

    Check the codepen version

    http://codepen.io/ssbalakumar/pen/jgLEq

    Bala Kumar
    • 29
    • 1
    • 8
    -1

    As @mircea c alluded to ...

    If your HTML looks like this:

    <div class="styled-select">
   <select>
     <option>Here is the first option</option>
     <option>The second option</option>
     <option>The thrid option</option>
   </select>
</div>

    Then you can remove the dropdown arrow in Firefox 30+

    .styled-select { 
  overflow: hidden; 
  width: 200px;
}

@-moz-document url-prefix(){
  .styled-select select { width: 110%; }
}

    Working demo: codepen

    FYI: The same technique works in IE 8 & 9, just use a conditional comment instead of @-moz-document url-prefix()

    JamesBarnett
    • 109
    • 3
    • 5
    • 17
    • To quote myself: "I'm not interested in solutions that overlay the arrow with another element, or solutions that nest the select element and do a overflow:hidden." – Blaise Jun 20 '14 at 10:37