Comment puis-je personnaliser la couleur d'arrière-plan des options de la zone de sélection en CSS ?

Personnalisation de la couleur d'arrière-plan de l'option de la zone de sélection

Lorsque vous cliquez sur une zone de sélection pour afficher ses options, vous souhaiterez peut-être personnaliser la couleur d'arrière-plan de ces options. Pour y parvenir :

Sélectionnez les éléments d'option :

Commencez par cibler les éléments d'option dans la zone de sélection, et non l'élément de sélection lui-même. Cela peut être fait en appliquant des styles pour sélectionner l'option dans votre CSS :

select option {
  ...
}

Définir la couleur d'arrière-plan :

Ensuite, définissez la propriété background-color pour l'option. élément à la couleur souhaitée. Par exemple, si vous souhaitez un arrière-plan sombre :

select option {
  background-color: rgba(0, 0, 0, 0.3);
}

Options individuelles de style (facultatif) :

Si vous souhaitez styliser les options individuelles différemment, vous pouvez utiliser le sélecteur d'attribut CSS pour les cibler en fonction de leur attribut de valeur. Par exemple, pour donner des couleurs de fond différentes à chaque option :

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

select option[value="2"] {
  background-color: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background-color: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background-color: rgba(250, 250, 250, 0.3);
}

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!