css - HTML 选项标签中的多种颜色(组合框)

Question

我需要一种在 html 选项标签中使用两种颜色的方法。为此，我编写了以下代码:

<select>
<option><span style="color: red;">color red1</span> - default color1</option>
<option><span style="color: red;">color red2</span> - default color2</option>
<option><span style="color: red;">color red3</span> - default color3</option>
</select>

如您所见，颜色样式不起作用。那么有没有办法在一个选项标签中使用多种颜色呢？

Answer 1

您可能需要移动 style attr 选项元素。还建议使用类与内联样式以实现可重用性。

另请注意:输入/选择/复选框等都具有特定于浏览器的样式。在开发多浏览器支持时请记住这一点。

更新 1:很抱歉错过了最终目标。不幸的是，选项元素不能有子元素，这样的样式将失败。

解决此问题的方法是构建您自己的 select使用标准的元素 <div>元素

<div>Some Text<span> - Second Text</span><div>

Example of Custom Select from W3 Schools

.twoTone {
  color: black;
}
.twoTone span {
  color: red;
}

<select>
<!-- Does Not work because options cannot have child elements -->
<option class='twoTone'><span>color red1</span> - default color1</option>
<option><span style="color: red;">color red2</span> - default color2</option>
<option><span style="color: red;">color red3</span> - default color3</option>
</select>

<!-- Works because divs allow child elements -->
<div class='twoTone'><span>Red Text -</span> Black Text </div>