将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可以工作。

PS-这在JSFiddle中工作正常，我已经对此进行了验证 ，但是我希望它在IE11中可以工作。

Answer 1

选择框和子选项的样式仅在不同浏览器中受支持有限。 Firefox允许您设置选项字体的样式，Chrome允许您设置整个列表的样式，但如果我没有记错的话，则不能设置单个选项的样式。 有关更多详细信息，请参见本文 。 您可以将其他元素设置为所需样式的样式，然后编写javascript以使其像选择一样。

Answer 2

为了在浏览器之间实现外观和样式的一致性，我建议您使用jQuery UI selectMenu小部件。 要使用此功能，您需要做的是以下操作：

在您的HTML中（与以前几乎相同）：

    <select id="fruits" style="width: 200px;">
        <option value="-1">Select</option>
        <option value="1">Banana</option>
        <option value="2">Apple</option>
        <option value="3">Grapes</option>
    </select>

在标题中：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

在您的自定义脚本中：

$(document).ready(function () {
    $("#fruits").selectmenu({
        select: function (event, ui) {

            // Make all the list items transparent.
            $(".ui-selectmenu-menu li.ui-menu-item").css("background-color", "transparent");

            // Make the SELECTED list item have a green background.
            $(".ui-selectmenu-menu li.ui-menu-item:nth-child(" + (ui.item.index + 1) + ")").css("background-color", "#BEF781");
        }
    });
});