jquery - 检索选项的背景颜色时 .css 在 firefox 中的奇怪行为

Question

我在这里做的很简单:

当有人从选择中选择一个选项时，我想将该选择的背景颜色更改为所选选项的颜色。

$("select").change(function(){
    var newcolor=$(this).children("option:selected").css("background-color");
    $(this).css("backgroundColor", newcolor);
});

简单吧？好吧，它在 Firefox 17.0.1 中根本不起作用(它在 Chrome 中起作用)。问题是变量 newcolor 填充了:rgb(51, 153, 255)。最好的部分是这种颜色在我的代码、CSS 或任何东西中都找不到。

我已经尝试将 background-color 更改为 backgroundColor，将 children 更改为 find，但没有任何效果。

有趣的是，如果我这样做:

$("select").change(function(){
    var newcolor=$(this).children("option:first").css("background-color");
    $(this).css("backgroundColor", newcolor);
});

然后选择第一个选项，而不是选择的那个……它起作用了!

我可能可以使用一些类让它工作，但我很好奇，为什么会发生这种情况，有什么办法可以解决它吗？

编辑:添加了一个 jsFiddle .试试 chrome 和 firefox!

Answer 1

发生这种情况是因为选择一个选项会更改其背景颜色。您可以在选择它时看到它。之所以这样做，是因为用户代理样式表中有一条规则使用“选定选项”背景颜色和颜色来设置选定选项的样式。