Appliquer css DropDown élément option

Question

je simple menu déroulant comme celui-ci: -

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

Je tente de définir un style personnalisé à l'une des options en utilisant la propriété jQuery .css, mais il ne fonctionne pas comme prévu dans tout IE11 \ Firefox. Ceci est mon code 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")); 
    } 
}); 

Le problème avec ce code est qu'il met à jour le DOM (je l'ai vérifié en utilisant l'outil de développement & Firebug) mais lorsque je tente de récupérer la valeur de background-color il donne moi ancienne valeur c'est à dire rgb(51, 153, 255) au lieu de rgb(190, 247, 129) ni il met à jour la couleur dans IE11. Auparavant, ce code fonctionnait bien dans IE7, mais je veux que cela fonctionne dans IE11 Que dois-je faire?

P.S. - Cela fonctionne très bien dans JSFiddle, j'ai déjà vérifié cela mais je veux que cela fonctionne dans IE11.

Answer 1

Le style des zones de sélection et des options enfants n'a qu'un support limité dans les différents navigateurs. Firefox vous permet de styler les polices dans les options, Chrome vous permet de styliser la liste entière mais pas les options individuelles si je me souviens bien. Voir this article pour plus de détails. Vous pouvez mettre en forme d'autres éléments pour les sélectionner comme vous le souhaitez, puis écrire en javascript pour agir comme un select.

Answer 2

Pour obtenir une apparence et un style uniformes d'un navigateur à l'autre, je vous recommande d'utiliser le widget jQuery UI selectMenu. Pour l'utiliser, tout ce que vous avez à faire est la suivante:

Dans votre code HTML (à peu près comme avant):

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

Dans votre tête:

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

Et dans votre mesure 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"); 
     } 
    }); 
});