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.

The scripting is not very big:
function setposition() { algset = new Array('left','right','center'); sel=document.getElementById('theselect'); sel.style.backgroundColor='blue'; sel.style.textAlign='center'; sel.style.color='orange'; for (i=0;i<sel.options.length;i++) { if (i%2 ==0) { clr='white'; bclr='green'; } else { clr='navy'; bclr='orange'; } sel.options[i].style.color=clr; sel.options[i].style.backgroundColor=bclr; sel.options[i].style.textAlign=algset[i%3]; } }
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 ROUND THE CORNERS... and then AN INSET SHADOW...

will look better withA LITTLE PADDING...

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

You can download all the code here