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

Question

给定以下 HTML 代码：

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

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

Answer 1

我不相信目前有办法在 CSS 或 (X)HTML 中做到这一点。正如“DaneSoul”所指出的，您可以<option>自己设置 s 的样式，但不能单独设置其中文本的不同部分的样式。

<option>标记不能有除文本节点以外的任何子节点。

这个问题/答案有更多信息，证实了这一点。

Answer 2

The only way this could be done is to create your own drop down list with DIVs, SPANs, perhaps a UL or two, and a bit of JavaScript (something like a CSS dropdown navigation menu cxould work too I suppose) then use JavaScript to set the value to be sent for your form.

Probably more work than it's worth.

Answer 3

<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");