Dzone icon Reddit icon
Facebook icon RSS Icon 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, Digital Point, and other progressive Q/A 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 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.

Styling Options for Options

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

Member Site:

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.

    // The script is not very big
    function setposition() {
        algset = new Array('left','right','center');
        for (i=0;i<sel.options.length;i++) {
            if (i%2 ==0) {
                clr='white'; bclr='green';
            else {
                clr='navy'; bclr='orange';

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.

Okay you get the idea. Now go out and do it.

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

Not a member of COBOLdinosaur yet? FREE registration takes less than a minute