在 html 选择标签中，如何更改封闭选项标签的部分文本的样式？ [关闭]答案

【问题标题】：In a html select tag,how to change style of partial text of enclosed option tags? [closed]在 html 选择标签中，如何更改封闭选项标签的部分文本的样式？ [关闭]
【发布时间】：2012-05-12 03:44:33
【问题描述】：

给定以下 HTML 代码：

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

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

【问题讨论】：

@BoltClock：您真的添加了“鉴于以下 html 代码：”这句话吗？还是修订历史在撒谎？
@thirtydot 对我说了同样的话……哈哈！
您最多可以使用nth-child(x) 设置第n 个选项的样式，我认为您不能在选项中设置特定字母的样式。除非您愿意尝试自定义下拉菜单.. 但它们不会是真实的<select>
Jonathon 指出的 stackoverflow.com/questions/3354979/… 的副本。
@thirtydot：不，显然 OP 在我修复 Markdown 时出于任何原因将其编辑了。系统需要了解修订合并。

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：

是的，我现在看到我的答案并不是真正的任务是什么......但我想它无论如何都会有所帮助。
@DaneSoul 我几乎也做了同样的事情，但不知何故注意到second character.. 并留下了评论:)

【解决方案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");

【讨论】：

阅读他想要改变文本“蓝色”中第二个字符的颜色而不是改变文本“蓝色”的颜色的问题。
是的，我没有回答，然后看到了这个细节......
哦等等..您可以使用nth-child (select:nth-child(2) { color: blue; }) 而不是为每个选项设置类/ID 的痛苦：P DEMO
select:nth-child(2) 与select :nth-child(2) 不同

【解决方案3】：

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

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

【讨论】：