Comment puis-je modifier la couleur d'arrière-plan d'une option sélectionnée en HTML ?

Option en HTML ? " />

Style CSS pour HTML <select> Option sélectionnée Couleur d'arrière-plan

En HTML, l'élément <select> est utilisé pour créer des listes déroulantes pour la sélection de l'utilisateur. Par défaut, lorsqu'une option est sélectionnée, sa couleur d'arrière-plan devient bleue. Cependant, vous souhaiterez peut-être personnaliser cette couleur à l'aide du CSS.

Le CSS. La propriété "selected-color" n'existe pas pour styliser la couleur d'arrière-plan d'une option <select> sélectionnée. Le CSS pur à lui seul peut ne pas suffire pour cette tâche.

Solution Javascript

.

Une approche plus réalisable consiste à utiliser une combinaison de HTML, CSS et Javascript pour obtenir le résultat souhaité. comment :

<select>

Dans le code HTML ci-dessus, nous avons créé un élément <select> avec une couleur de fond rouge prédéfinie.

select {
    color: black; /* Default color for options */
}

Ce CSS définit la couleur par défaut de tous dans le <select> en noir.

var sel = document.getElementById('mySelect');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
    selected.style.color = 'red';
}, false);

Dans ce code Javascript, nous ajoutons un événement écouteur de l'élément <select> Lorsqu'un utilisateur clique sur une option, il parcourt tous les éléments éléments et définit leur couleur sur blanc. Ensuite, il définit la couleur de l'option sélectionnée sur rouge.

En combinant HTML, CSS et Javascript, vous pouvez remplacer la couleur d'arrière-plan bleue par défaut de l'option <select> options et personnalisez-le à votre guise.

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!