Question

所以我花了最后一小时搜索，在Stack Overflow和其他网站上找到了很多答案。但它们都不起作用。

我希望能够使用jQuery基于所选项目在SELECT下拉框中动态设置文本的颜色。

我可以轻松更改背景颜色：

$('#selectBox').css("background-color", "red");

但如果我这样做：

$('#selectBox').css("color", "red");

它不起作用。文字保持黑色。

其他搜索显示::选择，但似乎适用于用户选择文本的样式（例如复制/粘贴）。

此外，我尝试过使用这样的CSS类：

option.red { color: red }

使用addClass（）来改变类，但同样，它没有用。

我已经在Firefox，Chrome和Safari中对此进行了测试。

我做错了什么？谢谢！

Answer 1

您需要更改<option>元素中文本的颜色。

$("#selectBox").find("option").css("color", "red");

Answer 2

你没有做错任何事，这种行为是SELECT元素的限制。你可以通过CSS做很少的事情。

我建议查看自定义下拉控件（有几个非常好的jQuery）

Answer 3

我为你创造了一个小提琴。从下拉列表中选择一个选项时，文本颜色会根据选项的ID动态更改。

<强> EXAMPLE

这是你在找什么？

<select class="selectBox" id="selectBox">
    <option id="yellow">Yellow</option>
    <option id="red">Red</option>
    <option id="blue">Blue</option>
</select>



$("select").change(function () {
    var ID = $(this).children(":selected").attr("id");
    $('#selectBox').css('color', ID);
});

Answer 4

我认为使用select标签更改CSS会与其他浏览器冲突，特别是与Internet Explorer。

如果你有这样一个特定的要求，那么试试这个jQuery函数来获得完美的结果。

http://adam.co/lab/jquery/customselect/

在SELECT框中更改文本颜色

4 个答案: