Select and Options Styling

问题

How to style the select options? I want alternating background colors in the drop down menu.

回答1:

Just like any other element

option:nth-child(even) {
  background-color: red;
}

option:nth-child(odd) {
  background-color: blue;
}

If you need to support browsers that don't support nth-child you'll need to use a class.

Some browsers don't support styling options at all (guess which ones).

回答2:

OK, if this is going the way of HTML/CSS, I might as well suggest a wonderful jQuery UI plugin called UI Selectmenu. It is the most wonderful thing I have seen about select menus so far. I bet you could easily implement alternating option colors with it.

But it's fair to say that this plugin is in development stage - proceed with caution!

回答3:

Just add size attribute along with select tag. Example select size="4", where 4 is the no of options to be displayed.

来源：https://stackoverflow.com/questions/3101135/select-and-options-styling