Apply css to dropdown option element

Question

I have a simple dropdown like this:-

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

I am trying to set a custom style to one of the options using jQuery .css property but it is not working as expected in any IE11 \\ Firefox. This is my jQuery code:-

$("#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"));
    }
});

The problem with this code is it is updating the DOM (I have verified it using the developer tool & firebug) but when I try to fetch the value of background-color it is giving me old value ie rgb(51, 153, 255) instead of rgb(190, 247, 129) nor it is updating the color in IE11. Earlier this code was working fine in IE7 but I want it to work in IE11 What should I do?

PS - This is working fine in JSFiddle , I have already verfied this but I want this to work in IE11.

Answer 1

Styling of select boxes and child options has only limited support in different browsers. Firefox allows you to style fonts in options, Chrome allows you to style the whole list but not the individual options if I remember correctly. See this article for more details. You can style other elements to appear as a select the way you want, and then write javascript to act like a select.

Answer 2

To achieve consistency of appearance and styling across browsers, I would recommend you use the jQuery UI selectMenu widget. To use this, all you have to do is the following:

In your HTML (pretty much same as before):

    <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>

In your header:

<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>

And in your custom 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");
        }
    });
});