Styling a drop down menu, select and option tags, with CSS

CSS gives you many options to style elements that was never available in HTML. Now you can apply color, background color and set the different font properties as well.

Don't go too crazy with this. Remember that a drop down menu like this, primarely serves one function; to be used. So make sure you don't make the list too confusing to use for your users.

Give me feedback on this page/code

Example:

Drop Down Menu

CSS:


<style type="text/css">

<!--

option {

font-family: verdana, arial, helvetica, sans-serif;

font-size: 12px;

}

option.one {background-color: #B0C4D0;}

option.two {background-color: #999;}

option.three {background-color: #666; color: white;}

-->

</style>

HTML:


<form name="CSS_styling_exmaple">

<b>Drop Down Menu</b>

<select name="selectname" SIZE="1">

	<option class="one">Something here</option>

	<option class="two">Something here</option>

	<option class="three">Something here</option>

	<option class="one">Something here</option>

	<option class="two">Something here</option>

	<option class="three">Something here</option>

	<option class="one">Something here</option>

	<option class="two">Something here</option>

	<option class="three">Something here</option>

	<option class="one">Something here</option>

	<option class="two">Something here</option>

	<option class="three">Something here</option>

</select>

</form>