Styling a <select> menu

Question

I have a select menu like this:

<select name="mySelect">
    <option value="250" selected="selected">250</option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="1500">1500</option>
</select>

It comes out looking different depending on OS and I would like it to have a different background. The problem is when I use a standard css background the arrow on the right of the select element remains visible.

select {
  background: url(../images/bg_select.png);
}

I would also like to have different background colours when the select list has been opened. The default is often blue and white.

Edit: Looks like I'll have to use javascript. Are there any jQuery plugins to do this?

Answer 1

You may want to look at this: Cut & Paste DHTML Select menu. It uses Javascript to replace the select menu with custom HTML.