改变SELECT框中的文本颜色

Question

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

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

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

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

但是，如果我这样做：

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

它无法工作。文字仍然是黑色的。

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

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

option.red { color: red }

使用addClass()方法来改变类，但是也没有起作用。

我已经在Firefox、Chrome和Safari中测试过了。

我做错了什么？谢谢！

- RobG

Answer 1

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

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

- Andy Jones

---

实际上，这确实改变了文本颜色http://jsfiddle.net/LZ22X/ - 您必须下拉下拉菜单 - 这是您获得的最佳效果，当未下拉时的常规文本我无法在Chrome中更改 - 检查其他浏览器。 - Andy Jones

是的，但是在我看来，“<select>本身没有文本颜色，只有背景颜色。”是错误的。 - Marcel Gwerder

@Marcel 我能够在Chrome、Firefox和IE中更改选择框的文本颜色并删除了这个声明。曾经有一段时间是这样的，我很高兴现在可以对选择框进行样式设置 - http://jsfiddle.net/73bzd/ - Andy Jones

我想我之前只尝试过使用font-weight，只要我记得没错的话应该是有效的。但是没关系，我已经更正了我的投票。我只是对为什么 option.red { color: red } 对他不起作用感到困惑... - Marcel Gwerder

是的...实际上我现在也是。 - Andy Jones

Answer 2

我为您创建了一个fiddle。当您从下拉菜单中选择选项时，文本颜色会根据选项的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);
});

- Thanos

Answer 3

您没有做错任何事情，这是SELECT元素的限制。您几乎无法通过CSS对其进行太多操作。

我建议研究自定义下拉控件（有几个相当好的jQuery插件）。

- Yuriy Galanter

Answer 4

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

如果您有这样的具体要求，请尝试使用此jQuery函数以获得完美的结果。

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

- Ajoshi