Comment utiliser la pseudo-classe pour changer la couleur d'arrière-plan des éléments sélectionnés dans une liste de sélection multiple

Amour clair

J'ai une liste de sélection multiple. J'essaie d'obtenir une couleur d'arrière-plan pour tout ce qui est sélectionné et tout ce qui n'en a pas.

form > classé > sélectionner > option j'ai appelé form id=opti j'ai essayé

#opti option:focus {
    background-color: #ffd56f;
}
#opti option:active {
    background-color: #ffd56f;
}
#opti option:hover {
    background-color: orange;
}

le survol fonctionne, mais je suis intéressé par la modification de la couleur d'arrière-plan des éléments d'option sélectionnés lorsqu'ils sont sélectionnés, pas seulement lorsqu'ils sont survolés.

S'il n'y a pas d'option pour cela dans css, quelle est une bonne alternative (ne me donnant pas de lien vers un logiciel tiers prédéfini), peut-être une fonction javascript qui s'exécute lorsqu'une sélection d'élément est modifiée, ou lorsqu'un élément est sélectionné et un sélectionné .

Toute aide est la bienvenue

Jan

Vous pouvez utiliser la :checkedpseudo-classe. ( Plus d'informations sur la pseudo-classe :checked )

Mais les navigateurs et les systèmes d'exploitation traitent souvent les éléments select/option individuellement et n'autorisent pas tout ou partie du style.

Par exemple, sur Firefox (macOS), le background-colorstyle from est ignoré. Mais vous pouvez utiliser box-shadowpour changer la couleur de l'arrière-plan.

Mais pour avoir des éléments de sélection entièrement personnalisés dans votre page, qui s'affichent et se comportent de la même manière sur tous les navigateurs, vous pouvez également utiliser une bibliothèque de remplacement comme Select2 .

select option:hover {
  background-color: yellow;
}
select option:checked {
  background-color: red; /* NOT working on Firefox (macOS) */
  box-shadow: 0 0 0 10px orange inset; /* working on Firefox (macOS) */
}
<select multiple>
  <option value="1">Lorem</option>
  <option value="2">Ipsum</option>
  <option value="3">Stack</option>
  <option value="4">Overflow</option>
</select>

Articles connexes