將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");
        }
    });
});