Test styling a single 'select' menu

Styling form items is very variable between browsers. I wanted a popup menu with different colour selections. Rather than having to resort to javascript, I thought I could use a single item <select> menu with appropriate css.

The test

The HTML and CSS

<style>
.selectstyle { background-color: gray; }
.option1style { background-color: blue; }
.option2style { background-color: green; }
.option3style { background-color: red; }
.option1style:hover { background-color: blue; }
.option2style:hover { background-color: green; }
.option3style:hover { background-color: red; }
</style>
<select class="selectstyle">
<option class="option1style">option 1</option>
<option class="option2style">option 2</option>
<option class="option3style">option 3</option>
</select>

The display

option 1 option 2 option 3

Results

:hover is ignored on all browsers. When you click on the select item to get the popup menu, the currently hovered item is always a dark blue colour. Also when the focus is on the select element, the current item is also always displayed in dark blue.

• IE6/7/8 - displays the RGB colour for the currently selected item, and in the popup menu. gray is ignored
• FF 3.5/Safari 4/Chrome - displays the currently selected item in gray. displays RGB in the popup menu
• Opera 10 - displays the RGB colour for first option item when selected, and in the popup menu. all other items are gray when currently selected or in the popup menu