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

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.