web-dev-qa-db-fra.com

Modifier la couleur d'arrière-plan de l'option de sélection de liste en survol

Est-il possible de changer la couleur de fond par défaut d'une option de liste de sélection en survol?

HTML:

<select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

J'ai essayé option:hover { background-color: red; }, mais cela ne sert à rien. Est-ce que quelqu'un sait comment faire ça?

htmlcssdrop-down-menu
49
Gopesh

Cela peut être fait en implémentant une ombre de boîte d'encart. par exemple:

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

Ici, .decorated est une classe attribuée à la zone de sélection.

J'espère que vous avez compris.

34
user2964504

Les éléments Select/Option sont rendus par le système d'exploitation, pas HTML. Vous ne pouvez pas changer le style de ces éléments.

10
Priyesh

L'implémentation d'un CSS d'ombre de zone d'encart fonctionne sur Firefox:

select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
}

L'élément d'option coché fonctionne dans Chrome:

select:focus > option:checked { 
    background: #000 !important;
}

Il y a un test sur https://codepen.io/egle/pen/zzOKLe

Pour moi, cela fonctionne sur Google Chrome Version 76.0.3809.100 (Version officielle) (64 bits)

6
Egle Kreivyte

Le problème est que même JavaScript ne pas voit l'élément option survolé. Ceci est juste pour mettre l'accent sur la façon dont cela ne va pas être résolu (au moins bientôt) en utilisant simplement CSS:

window.onmouseover = function(e)
{
 console.log(e.target.nodeName);
}

La manière niquement de résoudre ce problème (en plus d'attendre des millénaires que les éditeurs de navigateurs corrigent les bogues, sans parler de celui qui affecte ce que vous essayez de faire) consiste à remplacer le menu déroulant par votre propre HTML/XML en utilisant JavaScript. Cela impliquerait probablement de remplacer l'élément select par un élément ul et d'utiliser un élément radioinput par li. élément.

2
John

En FF, le filtre CSS fonctionne également. Par exemple. teinte-rotation:

option {
    filter: hue-rotate(90deg);
}

https://jsfiddle.net/w3a740jq/4/

1
mat3e