如何为select下拉框option选项内的指定文本设置自定义颜色

原生HTML的<option>标签不支持内嵌任何可渲染的HTML子元素，你写的<font>标签会被浏览器自动过滤掉，因此原生<select>控件无法实现选项内局部文本自定义颜色的需求，只能对整个<option>设置统一的字体/背景色。

可行替代方案 #

方案1：自定义模拟下拉组件（最推荐） #

放弃原生<select>控件，使用普通HTML元素模拟下拉交互，是唯一可以完美实现需求的方案，示例结构参考：

<!-- 下拉触发框 -->
<div class="select-trigger">请选择</div>
<!-- 下拉选项列表 -->
<ul class="select-dropdown" style="display: none;">
  <li>I want to set color <span class="text-dark-danger">here</span> and Not here.</li>
  <li>I want to set color <span class="text-dark-danger">here</span> and Not here.</li>
</ul>

你可以自行编写少量JS控制点击显示/隐藏下拉列表、选中项回填到触发框的逻辑，也可以直接使用前端组件库的下拉选择组件，这类组件默认都是模拟实现的下拉结构，支持自定义选项内容，完全可以实现局部文本着色。

方案2：原生控件降级方案 #

如果必须使用原生<select>，只能通过特殊标记间接提示高亮位置，无法实现颜色区分，示例参考：

<select>
  <option>I want to set color [高亮]here[/高亮] and Not here.</option>
  <option>I want to set color [高亮]here[/高亮] and Not here.</option>
</select>

内容的提问来源于stack exchange，提问作者goldenBellGrid