CSS Custom Dropdown Select That Works Across All Browsers IE7+ Ff Webkit

custom drop down not working IE and Firefox

For I.E:

select::-ms-expand
{  
 display: none;
}

For Firefox:

.select
{
-moz-appearance: none; 
 appearance: none;    
 text-overflow: ''; 
}

How do I style a select dropdown with only CSS?

Here are three solutions:

Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)

To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Browser Support:

appearance: none has very good browser support (caniuse) - except for Internet Explorer.

We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.

To at least undo our custom arrow - leaving the default select arrow intact.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

All together:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}

/* CAUTION: Internet Explorer hackery ahead */

select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Select menu arrow style for Internet Explorer and Firefox

I don't know of a pure CSS solution for IE, but something you could do for Firefox would be to cover the arrow of the select (just the arrow!) with another element for which the background is your custom arrow and use pointer-events: none on that element (this also works for Chrome and Safari).

DEMO

HTML:

<select>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>
<div class='arrow'></div>

CSS:

select, .arrow { display: inline-block; vertical-align: middle; }
option { padding: 0 1em; }
.arrow {
    width: 26px;
    height: 26px;
    margin-left: -28px;
    display: inline-block;
    background: url(arrow.png);
    background-size: 100% 100%;
    pointer-events: none;
}

For IE, you could also cover the arrow of the select, add a click listener on the element covering the arrow and open the select when the arrow is clicked. This would actually work for any browser, but it involves JavaScript.

IE & Firefox - custom drop down could not remove native arrows

Use this it will work but with IE10+ and for FF :

Your css should look like this:

select.desktopDropDown::-ms-expand {
    display: none;
}

More about ::ms-expand.

Then for the rest :

select.desktopDropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : url("../img/assets/arrow.png") no-repeat right #666;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

Note: I hardcoded path "../img/assets/arrow.png" as background.

This should work good for you in IE, Firefox and Opera .

Remove Select arrow on IE

In IE9, it is possible with purely a hack as advised by @Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.

In case if it is IE10 then using below css3 it is possible

select::-ms-expand {
    display: none;
}

However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.

Dropdown css in ie not working

in your css file you have to add this keywords for support in different browsers

-moz for mozilla and chrome
-webkit for safari
-o for opera
-ms

and i think the the css would work fine with ie 10.0

here's an ex.

div { -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; }