I have a design to convert from PSD files that has the <select> elements styled with a background image, which does not seem to be possible using CSS.

What's the best way to style these elements? Currently I have an invisible (opacity: 0) <select> over a <div> with the appropriate styling applied, dynamically populating the <div> when an option is selected.

While this works, it does not look great.

What is the best alternative to achieve this result?

  • Edit: HTML tag brackets changed to html entities so they appear in the post. Edward Williams about 10 years ago

4 answers

Andy Ford 533
This was chosen as the best answer

CSS styling of select elements is very limited. Have a look at Scott Darby's "Stylish Select" plugin for jQuery. I've used it on a few projects and it does a nice job.

Answered about 10 years ago by Andy Ford

Besides the title of your question you do not go into much detail about the elements that you are trying to style. If you are trying to style SELECT elements, then you are out of luck. Those tend to be reserved system elements w/ limited CSS support. Your best bet would be to use either a custom CSS dropdown menu created out of a UL, or use a jQuery type plug-in that converts SELECT's into a CSS dropdown. The Filament Group have done a great job at creating accessible plug-ins using jQuery like http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/. If you absolutely need to create something that looks like your comps, then you may need to use a plug-in or something faux custom.

Answered about 10 years ago by Efficient Pixel

Select elements are hard to style. Background images not very supported at all. I would say you'll have to use JavaScript to do the following:

  1. If JS (and necessary methods) is supported, move the select element offscreen by adding a class to the select element
  2. analyze the select element with JS and generate a HTML/CSS-version of the select and options element (lists should do fine)
  3. bind necessary JS functions and events to make the newly generated HTML/JS/CSS-widget interactive in the same way select elements normally work (ie when you click an option, select the corresponding option in the original select element that has been moved offscreen and the widget option list is collapsed)

I recommend that you use a library such as JQuery for this task.

Answered about 10 years ago by Jens Hedqvist

If you want to style different input types, you can do this in CSS:

input[type="select"] { background-color:white }
input[type="text"] { foo.... }
input[type="submit"] { foo... }


Answered about 10 years ago by Nathan DeGruchy