How do I style a <select> dropdown with only CSS?

Asked 2009-12-13T03:33:56.377

1655

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.

Edit Report

2 Answers

A very nice example that uses :after and :before to do the trick is in Styling Select Box with CSS3 | CSSDeck

answered 2013-04-28T11:31:34.353

You definitely should do it like in Styling select, optgroup and options with CSS. In many ways, background-color and color are just what you would typically need to style options, not the entire select.

answered 2012-07-16T22:28:14.707

How do I style a <select> dropdown with only CSS?

2 Answers

Your Answer