jquery - 将 css 应用于下拉选项元素

Question

我有一个像这样的简单下拉菜单:-

<select id="fruits">
    <option value="-1">Select</option>
    <option value="1">Banana</option>
    <option value="2">Apple</option>
    <option value="3">Grapes</option>
</select>

我正在尝试使用 jQuery .css 属性将自定义样式设置为选项之一，但它在任何 IE11\Firefox 中都没有按预期工作。这是我的 jQuery 代码:-

$("#fruits").change(function () {
    $(this).css("background-color", "transparent");
    $(this).find('option').css("background-color", "transparent");
    var selectedVal = $(this).find('option:selected');
    if (selectedVal != "-1")
    {
       console.log("B4->" + $(this).find('option:selected').css("background-color"));
       $(this).find('option:selected').css("background-color", "#BEF781");
       console.log("Aftr->" + $(this).find('option:selected').css("background-color"));
    }
});

此代码的问题在于它正在更新 DOM(我已经使用开发人员工具和 Firebug 对其进行了验证)但是当我尝试获取 background-color 的值时，它给了我旧的值即 rgb(51, 153, 255) 而不是 rgb(190, 247, 129) 也不会更新 IE11 中的颜色。早些时候这段代码在 IE7 中运行良好，但我希望它在 IE11 中运行我应该怎么做？

附言- 这在 JSFiddle 中工作正常，我已经验证了这一点，但我希望它能在 IE11 中工作。

Answer 1

选择框和子选项的样式在不同浏览器中的支持有限。 Firefox 允许您在选项中设置字体样式，Chrome 允许您设置整个列表的样式，但如果我没记错的话，则不能设置单个选项的样式。参见 this article更多细节。您可以设置其他元素的样式，使其以您想要的方式显示为一个选择，然后编写 javascript 使其表现得像一个选择。