Stylize <select> with css [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be开发者_JAVA技巧 reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

How do I achieve the style like the image below?

http://imageshack.us/photo/my-images/268/selectstyle.gif/

---

Use jQuery plugins. for example, and more

---

Are you using jQuery? If you are, do a search for custom dropdown framework like this one by Filament Group

If you are curious and want to do it yourself. Read on.

You cannot really style the element to that extent, but the trick is to replace that element via JS with a trigger element (usually an <a>) and the list overlay (usually <ul> positioned absolutely and hidden at first). Then, when the trigger element is mousedown-ed, you show/hide the overlay.

Of course, you also need to handle the click event for the individual list item overlay. And it's also a good idea to take care of keyboard interaction and focus/blur states.

Hope that points you to the right direction.