Comment modifier le comportement de mise en évidence par défaut de la balise SELECT dans IE et Opera ?

Question

Voici mon HTML :

<select style="background-color:#e0f0f1">
  <option selected="selected">Select</option>
  <option class="" value="one">One</option>
  <option class="" value="two">Two</option>
</select>

Voir ce code en action

Dans IE et Opera, lorsque vous sélectionnez une option, elle est mise en évidence par une couleur de fond bleue. Firefox, Chrome et Safari ne font pas cela. Existe-t-il un moyen ou une astuce pour supprimer ce surlignage bleu lorsque l'option est sélectionnée, de sorte que la couleur d'arrière-plan originale soit toujours affichée ?

Si ce n'est pas possible, existe-t-il un moyen d'ajouter un comportement jQuery qui simule un clic ailleurs sur la page juste après la sélection de l'option ? En gros, lorsque vous cliquez ailleurs que sur l'option sélectionnée, la surbrillance disparaît.

Answer 1

Dans IE11 (je ne suis pas sûr pour les versions précédentes), vous pouvez supprimer le fond bleu d'un élément de sélection focalisé avec

select::-ms-value {background: none;}

Voici une démo pour débuter.

Answer 2

Je pense avoir trouvé une solution à ce problème. Peut-être pas une solution très propre, mais cette astuce fonctionne.

Je l'ai testé dans Firefox, Chrome, Safari, Opera et IE 9. Il fonctionne sur tous ces systèmes, mais pas sur les anciennes versions d'IE (6 et 7). Je n'ai pas testé dans IE8. Si quelqu'un peut le tester sur Mac et me faire savoir si cela fonctionne, ce serait formidable.

J'ai ajouté un champ de saisie dont la largeur et la hauteur sont égales à 0 et qui reçoit le focus lorsqu'une option est cliquée. L'utilisation de display:none et visibility:hidden dans le champ de saisie ne fonctionne pas. Vous devrez donc cacher le champ de saisie quelque part dans le coin ou utiliser l'indice z pour le déplacer derrière un conteneur, ce qui pourrait également fonctionner (mais je n'ai pas essayé). Si quelqu'un a une meilleure solution, faites-le moi savoir.

HTML :

 `<select style="background-color:#e0f0f1">
    <option selected="selected">Select</option>
    <option class="" value="one">One</option>
    <option class="" value="two">Two</option>
  </select>
  <input type="text" id="abc" style="width:0; height:0;" />`

jQuery:

$(document).ready(function(){
  $('select option').on('click', function() { $('#abc').focus(); });
});

Voir cette page dans Fiddle

Answer 3

Cela ne peut pas vraiment être fait car c'est le comportement par défaut du navigateur. La meilleure solution consiste probablement à remplacer les boîtes de sélection par une fonctionnalité similaire qui peut être stylisée, comme la fonction jQuery Chosen plugin.