Style <select> drop down menu's using only CSS?

Get Started
1

Can I style <select> drop down (option) menu’s using only CSS?

The attached link demonstrates the look I’m trying to achieve.

Can I attain consistency across browsers using only CSS? I imagine if I used background images, I’d have to incorporate sliding doors in order to have fluid widths? Or CSS3 multiple background images?

Cursory reading indicates I’ll have to use javascript…but the articles I’m finding are really old.

link to example: select-artwork

2

That is one of the harder form elements to style because Internet Explorer just uses the drop down built into the operating system to display it on top of the web page rather than using anything in the web page itself that can be styled.

3

Hi, felgall,

I really appreciate your explanation of why it’s so difficult to style. Leads me to wonder a couple things:

  1. do later versions of IE (8,9,10) treat it as a browser element?
  2. what is it about javascripting that makes it a more effective tool for modifying elements that are laid atop a web page? I’m guessing it modifies the element in the DOM before the page actually loads?
  3. also wondering if it’s a pretty acceptable practice to NOT style the <select> menu…I’ll surf around and dig into that…
4

Yes, it is acceptable practice not to style a select menu and the browsers tend to differ in their interpretations of how they style them as default.

5