如何更改下拉 <select> 标签中部分文本的颜色 [重复]答案

【问题标题】：How can I change the color of partial text in dropdown's <select> tag [duplicate]如何更改下拉 <select> 标签中部分文本的颜色 [重复]
【发布时间】：2020-11-27 09:57:08
【问题描述】：

考虑我的代码如下：

<select id="TestStatus">
  <option value="0">Active <span style="color:#0823fa;">*</span></option>
  <option value="0">Inactive</option>
</select>

在这里，我想将“*”的颜色更改为“蓝色”，但它不起作用。谁能建议我如何实现这个 UI？

【问题讨论】：

标签： html jquery css drop-down-menu

【解决方案1】：

实际上不可能在选项标签内插入其他 DOM 元素。

这就是浏览器呈现您的代码的方式（我只添加了您缺少的“”）。

<select id="TestStatus">
   <option value="0">Active <span style="color:#0823fa;">*</span></option>
   <option value="0">Inactive</option>
  </select>

您可以使用 css 编辑选项元素样式，但您不能在其中添加任何内容，然后是文本。在这里您可以阅读有关选项标签规范的更多信息： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

【讨论】：

【解决方案2】：

<option> 标签不能包含其他 HTML 标签，您可以检查您的 HTML 代码并查看您添加的 <span> 元素不存在

这里有更多细节Styling part of the OPTION text

这是一个 JS fiddle 示例，说明如何创建自己的下拉选择

http://jsfiddle.net/ZTHkQ/850/

【讨论】：