Comment puis-je personnaliser la couleur d'arrière-plan des options sélectionnées dans les éléments HTML ?

Style des options sélectionnées en HTML <select> Éléments

Dans les formulaires HTML, l'option <select> L'élément fournit une liste déroulante d'options pour la sélection de l'utilisateur. Par défaut, l'option sélectionnée apparaît sur fond bleu. Cet article explique comment personnaliser la couleur d'arrière-plan de l'option sélectionnée à l'aide de CSS et JavaScript.

Approche CSS

Malheureusement, il n'existe aucune propriété CSS inhérente pour modifier l'arrière-plan. couleur d'une option sélectionnée dans un champ <select> élément. Cependant, vous pouvez créer un élément de sélection personnalisé en utilisant CSS et HTML pour y parvenir :

<div class="custom-select">
  <select>

.custom-select {
  position: relative;
  width: 200px;
}

.custom-select select {
  display: none;
}

.custom-select-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-select:hover .custom-select-overlay {
  opacity: 0.5;
}

.custom-select select:focus + .custom-select-overlay {
  opacity: 1;
}

Approche JavaScript

En utilisant JavaScript, vous pouvez manipuler le DOM directement pour changer la couleur de fond de l'option sélectionnée lors de sa sélection :

<select>

var select = document.getElementById('mySelect');

select.addEventListener('change', function() {
  var options = this.children;
  for (var i = 0; i < options.length; i++) {
    options[i].style.backgroundColor = 'white';
  }
  this.children[this.selectedIndex].style.backgroundColor = 'red';
});

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!