Hi,
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.
5 answers
points
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.
- Perfect for what I wanted. Thanks
points
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.
points
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:
- If JS (and necessary methods) is supported, move the select element offscreen by adding a class to the select element
- analyze the select element with JS and generate a HTML/CSS-version of the select and options element (lists should do fine)
- 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.
points
Some browsers have more CSS support than others but IE specifically uses ActiveX to draw its <select>s and technically does them on a layer above the whole page. You aren't able to position anything above them using z-index.
Your only resort is a javascript technique like mentioned above followed by a stern talking to with the designer. Also, while some techniques use the opacity: 0 trick for to help style form elements (especially file inputs) this is the same method used for clickjacking. I wouldn't be surprised to see browsers disable this type of hack in the near future.
points
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... }
Etc...
