如何在选项标签中用多种颜色为文本着色答案

【问题标题】：How to color text with multiple colors in option tag如何在选项标签中用多种颜色为文本着色
【发布时间】：2014-10-17 01:29:38
【问题描述】：

我有一个下拉列表，其中显示了 2 个值。我喜欢第二个值有另一种文本颜色（浅灰色）。我一直在寻找如何做到这一点，显然你需要为此使用 Java 脚本。不幸的是，我对 Java 脚本不是很好，到目前为止我尝试的所有方法都不起作用。

<select name="cities">
    <option value="1">London (England)</option>
    <option value="2">Sidney (Australia)</option>
    <option value="3">Amsterdam (Netherlands)</option>
</select>

我尝试过这样的事情：

<option value="1">
    <span style="text-decoration:line-through">London</span>
    <span style="color:green;font-weight:bold">(England)</span>
</option>

和

<script type="text/javascript">
    document.getElementById('country').style.color = '#FF0000';
</script>

<option value="1">London <span id='country' style='color:red'>(England)</span></option>

虽然它在 fiddle 中有效，但在我的网站上无效。

另一个接近的选项是Assign color to select OPTION

任何人都知道一些简单的 java 脚本代码来使这成为可能吗？谢谢

【问题讨论】：

这个问题与stackoverflow.com/questions/22372476/… 几乎相同，但从未完全回答过。
虽然option支持几种样式，但是为了应用生动的样式为什么不自己编写html和脚本来生成自定义选择框呢？
不幸的是，还没有一个好的答案。请问有人可以帮忙吗？

标签： javascript forms select

【解决方案1】：

检查这个Fiddle（这需要投入大量工作）

您可以创建一个如图所示的自定义下拉控件，但有很多事情需要牢记并需要处理，例如在单击下拉列表之外的任何位置时隐藏下拉列表。

只是粘贴 HTML 供您参考

<div class="selected">London (England)</div>
<div class="dropdown">
    <div id="1" class="outer"><div class="first">London</div><div class="second"> (England)</div></div>
    <div id="2" class="outer"><div class="first">Sidney</div><div class="second"> (Australia)</div></div>
    <div id="3" class="outer"><div class="first">Amsterdam</div><div class="second"> (Netherlands)</div></div>
</div>

【讨论】：

【解决方案2】：

您可以尝试使用 CSS。像这样

select option:nth-child(even) {
    color: green;
}

select option:nth-child(odd) {
    color: "#000";
}

或者只是改变第二个选项的颜色

select option:nth-child(2) {
   color: green;
}

【讨论】：

color 属性工作正常。其他样式（例如粗体）呢？
@Moogs 尝试不同的颜色，如绿色/灰色。
感谢您抽出宝贵时间回答。然而，我正在寻找的解决方案在同一行上有 2 种不同的颜色。在我的例子中，用两种不同的颜色（黑色和浅灰色）显示城市和国家。