CSS with Option tag - Editing text color

问题

Is there any secret behind editing a option tag with css? I just can't solve this issue

<option> FirstName <span class = "foo">SecondName</span> </option>

.foo{
    color:#666666;
}

What am I missing?

回答1:

<option> elements cannot contain anything other than text. So no, you can't apply a style to a section of their content.

Just don't use a <select>, or don't bother about styling. From your use case, it doesn't really look suitable anyway. It'd be better just to type the name, wouldn't it?

回答2:

I know this question is old, but there are some new developments in the world of CSS!

color property on select will now set color of option(s) text (including selected), while adding / over-riding color to select option.

CSS:

select {
  color: white; /* color of selected option */
 }

select option {
  color: black; /* color of other options */
}

来源：https://stackoverflow.com/questions/7717796/css-with-option-tag-editing-text-color