Changement <select> couleur de surbrillance

Question

Comment changer la couleur de surbrillance de <select> qui est la couleur qui met en surbrillance <li> pendant que le curseur passe dessus en utilisant CSS?

Answer 1

Aucune idée de ce que vous entendez par « la couleur met en surbrillance <li> ", mais il semble que vous voulez changer la couleur de fond de <option> éléments. Je l'ai essayé et ça ne marche pas, vous obtenez toujours la couleur du système.

Si vous vouliez mettre en évidence l'ensemble de l'élément <select> sur mouseover, cela fonctionne un peu:

select:hover { background-color: red; } 

Cependant, le comportement est différent dans les différents navigateurs. Par exemple, Chrome ne met pas en surbrillance les options dans le menu déroulant; Firefox le fait, mais ensuite il ne les change pas si vous déplacez la souris et qu'ils sont toujours abaissés.

Comme cela a été indiqué sur beaucoup, beaucoup de questions similaires, vous pouvez pas style de façon fiable les contrôles de formulaire. See here pour plus de détails.

Answer 2

Vous pouvez utiliser: hover pseudo classe

par exemple

.classOfElementToColor:hover {background-color:red; color:black} 

Fonctionne avec la plupart des navigateurs, mais pas sur tous les éléments de IE6

Answer 3

suffit d'utiliser ce sélecteur CSS:

select option:hover { 
    background-color: yellow; 
} 

Answer 4

Comme mentionné ci-dessus, la mise en background-color ne fonctionnera cependant :hover est bogué dans IE7 - la configuration de votre doctype strict vous aidera.

Answer 5

Vous ne pouvez pas changer la couleur de surbrillance des options par quelque chose comme ->background:#f9f9f9

Vous pouvez faire quelque chose comme ceci:

  select > option:hover{ 
       box-shadow: 0 0 10px 100px #FED20F inset; 
       transition: all .2s ease-in-out; 
      }