Style drop-down lists (select)

Question

I know that with jquery you can do something similar to a select box so that I can do this, but I want to. However, with just css, how much control do I have?

I use border, padding and width, and the end result looks great.

The only thing that bothers me is the part that falls. Is there any control over this? (It looks silly to have padding, but not in the drop-down list).

Answer 1

You have some control, but there are quite a few differences between browsers and operating systems. For example, Internet Explorer on Windows will always display the standard gray down arrow, even if you can repaint it in other browsers.

, - , ; :

select {
   border: 1px solid red;
}

option {
   background-color: blue;
}

, , , , , :

• : http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
• : http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
• : http://www.electrictoolbox.com/style-select-optgroup-options-css/