CODEWITHSUNDEEP
htmlcssforms
Benbob
Benbob

Reputation: 14234

Styling a <select> menu

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?

Upvotes: 1

Views: 780

Answers (2)

Mohammad AlQanneh
Mohammad AlQanneh

Reputation: 3396

all a listener to the select and use jquery to trigger the class add/remove classes should work fine

Upvotes: 0

Vincent McNabb
Vincent McNabb

Reputation: 34659

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

Upvotes: 2

Related Questions