Comment changer la couleur d'arrière-plan des options de la liste de sélection en survol ?

Style de la couleur d'arrière-plan des options de liste de sélection au survol

En HTML, la couleur d'arrière-plan par défaut des options de liste de sélection reste inchangée au survol. Cependant, certains utilisateurs peuvent souhaiter un changement de couleur d'arrière-plan personnalisé pour améliorer l'interactivité.

Pour obtenir ce comportement souhaité, il est important de comprendre que les spécifications CSS actuelles ne fournissent pas de prise en charge directe pour la modification de la couleur d'arrière-plan de l'option au survol. Règles de sélection CSS telles que option:hover { background-color: yellow; } sont inefficaces.

Une solution potentielle consiste à utiliser des bibliothèques tierces comme Chosen ou select2. Ces bibliothèques offrent des options de style complètes, notamment la possibilité de personnaliser la couleur d'arrière-plan des options survolables. Cependant, l'utilisation de ces bibliothèques introduit une dépendance externe.

Une approche alternative, quoique plus complexe, consiste à convertir la liste de sélection en une liste non ordonnée à l'aide de jQuery ou de bibliothèques JavaScript similaires. En créant une liste non ordonnée personnalisée, vous obtenez un contrôle total sur le style, vous permettant de définir la couleur d'arrière-plan des options survolées. Voici un exemple :

<code class="html"><ul id="select-list">
  <li value="1">One</li>
  <li value="2">Two</li>
  <li value="3">Three</li>
</ul></code>

<code class="css">#select-list {
  list-style-type: none;
  padding: 0;
}

#select-list li:hover {
  background-color: yellow;
}</code>

<code class="javascript">$('#select-list').hover(function() {
  $(this).css('background-color', 'yellow');
}, function() {
  $(this).css('background-color', 'initial');
});</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!