Comment puis-je modifier la couleur d'arrière-plan des options de la zone de sélection à l'aide de CSS ?

Comment modifier la couleur d'arrière-plan des options de la zone de sélection

Lorsque vous cliquez sur une zone de sélection, une liste d'options s'affiche. Par défaut, la couleur d'arrière-plan de ces options est la même que la couleur d'arrière-plan de la zone de sélection elle-même. Cependant, vous pouvez utiliser CSS pour modifier la couleur d'arrière-plan des options.

Pour ce faire, vous devez appliquer la propriété background-color aux éléments d'option, pas à l'élément select. Par exemple, le code CSS suivant changera la couleur d'arrière-plan de toutes les options d'une zone de sélection en noir :

select option {
  background-color: black;
}

Si vous souhaitez styliser chaque option individuellement, vous pouvez utiliser le sélecteur d'attribut CSS. Par exemple, le code CSS suivant changera la couleur d'arrière-plan de la première option d'une zone de sélection en rouge, la deuxième option en vert et la troisième option en bleu :

select option:first-child {
  background-color: red;
}

select option:nth-child(2) {
  background-color: green;
}

select option:nth-child(3) {
  background-color: blue;
}

Vous pouvez également utiliser différents attributs de classe pour chaque élément, si vous le souhaitez. Par exemple, le code CSS suivant changera la couleur d'arrière-plan de toutes les options d'une zone de sélection avec l'option de classe-1 en rouge et de toutes les options avec l'option de classe-2 en vert :

.option-1 {
  background-color: red;
}

.option-2 {
  background-color: green;
}

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!