Comment puis-je changer la couleur d'arrière-plan d'une option sélectionnée dans un élément HTML ?

Personnalisation de la couleur d'arrière-plan de l'option sélectionnée en HTML Select

En HTML, l'option L’élément permet aux utilisateurs de choisir une seule option dans une liste d’options. Par défaut, le navigateur met en évidence l'option sélectionnée sur un fond bleu. Cependant, les développeurs souhaitent souvent personnaliser davantage cette apparence.

Dans l'exemple fourni, un

L'élément avec un fond rouge est défini, mais l'option sélectionnée reste bleue. Les tentatives visant à remplacer ce comportement en utilisant un style tel que « couleur sélectionnée » se sont révélées vaines. Cette question examine les options disponibles pour obtenir la personnalisation souhaitée.

Solution JavaScript

Le CSS pur à lui seul peut ne pas suffire à résoudre ce problème. Cependant, une simple solution JavaScript peut le résoudre avec élégance.

var sel = document.getElementById('select_id');
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);

Cette méthode grossière mais efficace garantit que seule l'option sélectionnée conserve la couleur spécifiée, tandis que toutes les autres reviennent au blanc.

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!