Why this site looks better in Firefox
Borrow my code

Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, and other help sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from coboldinosaur.com a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Dzone icon Reddit icon Facebook icon RSS Icon


Styling Options for Options

Submitted by: COBOLdinosaur on 2012-08-21 01:46:41

Member Site: http://COBOLdinosaur.com

One of the most versatile and useful elements in HTML is the select. Unfortunately it is also one of the most difficult to style. The worst is trying to get options to accept a little bit of presentation enhancement. A stylesheet is virtually without value. The normal solution is to use Javascript.

The problem is that the browsers treat HTML and CSS as meta data and ignore styling as they create the document object. Javascript can be used to overcome this shortcoming (up to a point) because it extends the DOM without regard to the browser limitation. There are still cross-browser issues (IE is still crappy but even it can be improved. So let's get started.

Click to style the select options

The scripting is not very big:

If you are using IE you will probably not see the variations of alignment because IE is pretty limited. The rest of the effects from here are pretty much limited to the good browsers, but the IE presentation is better than nothing and IE user are used to the limited ability of their browser already.

For good browsers we can ... and then ...

will look better with...

Okay you get the idea. Now go out and do it. It's also not bad as a

You can download all the code here

Got a special script or snippet? Author Guidelines

To comment on this snippet LOGIN or REGISTER FOR FREE
Want to talk about this page? Send a comment to Cd&
Not a member of COBOLdinosaur yet? FREE REGISTRATION HERE