在html选择标记中，如何更改封闭选项标记的部分文本的样式？

Question

给出以下HTML代码：

<select>
  <option>yellow</option>
  <option>red</option>
  <option>blue</option>
</select>

例如，更改文本“蓝色”中第二个字符的颜色。

Answer 1

我不相信目前有一种方法可以在CSS或（X）HTML中实现。正如“DaneSoul”指出的那样，你可以自己设置<option>的样式，但你不能单独设置文本内部不同部分的样式。

<option>代码不能包含除文本节点以外的任何子代。

This question/answer有更多信息，确认了这一点。

Answer 2

<select>
  <option id='option1'>yellow</option>
  <option id='option2'>red</option>
  <option id='option3'>blue</option>
</select>

然后在CSS中添加样式

#option3{ color: blue; }

如果你需要动态，你可以使用JQuery：

$("#option3").css("color", "blue");

Answer 3

这样做的唯一方法就是创建自己的下拉列表，其中包含DIV，SPAN，可能是UL或者两个，以及一些JavaScript（类似CSS下拉导航菜单，我想也可以使用）然后使用用于设置要为表单发送的值的JavaScript。

可能比它的价值更多的工作。