Question

我在表单中有一个下拉列表，其中显示了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脚本代码才能实现这一目标吗？谢谢

Answer 1

您可以尝试使用CSS。喜欢这个

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

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

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

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

Answer 2

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

您可以创建一个自定义的Dropdown控件，但是有很多事情要记住，并且要处理以便在点击其外的任何位置时隐藏下拉列表。

粘贴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 个答案: