How to style a select dropdown with CSS only without JavaScript?
Is there a CSS-only way to style a <select> dropdown?
I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?
This code needs to be compatible with all major browsers:
- Internet Explorer 6,7 and 8
- Firefox
- Safari
I know I can make it with JavaScript: Example.
And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.
I found similar questions on Stack Overflow.
And this one on Doctype.com.
CSS
html
Javascript
- asked 9 years ago
- B Butts
1Answer
Important Update!
In addition to webkit, as of Firefox V35 we'll be able to use the appearance property.
(From the above link:)
Using -moz-appearance with the none value on a combobox now remove the dropdown button
So now in order to hide the default styling - it's as easy as adding the following rules on our select element:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
For IE 11 support, you can use ::-ms-expand.
select::-ms-expand { /* for IE 11 */
display: none;
}
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
select {
background: none;
padding: 5px;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
- answered 8 years ago
- G John
Your Answer