...
CSS, HTML, Tutorials

How to style a select dropdown with only CSS for all modern browsers?

27 December 2018

To hide the default arrow on select menu element from all major browsers using one simple set of property. Then you can also used to add background image instead of that arrow.

We are going to see select drop down css style with example

HTML

<select>
   <option>Wordpress</option>
   <option selected>Javascript</option>
   <option>CSS</option>
   <option>HTML</option>
</select>

CSS

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

“appearance: none” has very good browser support – except for ie11- and firefox 34-
We can improve this technique and add support for ie10 and ie11 by adding


select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}

If ie9 is a concern – we have no way of removing the default arrow but, we could use a funky ie9 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;
    } 
}

Leave a Comments