6

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

我希望能够使用 jQuery 根据选择的项目动态设置 SELECT 下拉框中的文本颜色。

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

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

但如果我这样做：

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

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

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

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

option.red { color: red }

并使用 addClass() 更改类，但同样，它不起作用。

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

我究竟做错了什么？谢谢！

4

4 回答 4

8

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

$("#selectBox").find("option").css("color", "red");
于 2013-07-30T00:50:10.633 回答
3

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

例子

这是你想要的？

<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);
});
于 2013-07-30T01:43:27.490 回答
2

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

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

于 2013-07-30T00:51:10.227 回答
0

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

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

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

于 2013-07-30T06:54:32.737 回答