Maison > interface Web > tutoriel CSS > Comment changer la couleur d'arrière-plan des options de la zone de sélection ?

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

Linda Hamilton
Libérer: 2024-12-18 10:49:24
original
730 Les gens l'ont consulté

How to Change the Background Color of Select Box Options?

Comment modifier la couleur d'arrière-plan des options de la boîte de sélection lors de l'ouverture

En essayant de personnaliser une boîte de sélection, vous rencontrez des difficultés pour changer l'arrière-plan couleur de ses options lorsqu'elles sont activées. Pour résoudre ce problème, il est crucial de cibler le bon élément HTML.

Solution :

Contrairement à la zone de sélection elle-même, la modification de la couleur d'arrière-plan doit être appliquée aux éléments d'option. :

select option {
  background: rgba(0, 0, 0, 0.3);
}
Copier après la connexion

Personnalisation avancée :

Pour un style individuel, utilisez sélecteurs d'attributs :

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}
Copier après la connexion

De plus, vous pouvez exploiter les attributs de classe pour un contrôle plus précis :

<select>
  <option class="custom-option" value="1">Option 1</option>
  <option class="custom-option" value="2">Option 2</option>
</select>
Copier après la connexion
.custom-option {
  background: blue;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal