Est-il possible de modifier la couleur d'arrière-plan par défaut d'une option de liste de sélection au 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. Quelqu'un sait-il comment procéder ?
De cette façon, nous pouvons le faire avec un minimum de changements :)
<html>
<head>
<style>
option:hover {
background-color: yellow;
}
</style>
</head>
<body>
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
L'implémentation d'une ombre de boîte insérée CSS fonctionne sur Firefox :
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}L'option cochée 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 (Official Build) (64-bit)
Dernier article que j'ai trouvé sur le sujet par Chris Coyier (28 oct. 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
Le problème est que même JavaScript ne pas voir le option lorsque l'élément est survolé. C'est juste pour mettre l'accent sur le fait qu'il n'y aura pas de solution (de sitôt en tout cas) en utilisant uniquement le CSS :
window.onmouseover = function(event)
{
console.log(event.target.nodeName);
}En seulement Pour résoudre ce problème (outre le fait 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), vous pouvez remplacer le menu déroulant par votre propre HTML/XML à l'aide de JavaScript. Cela impliquerait probablement le remplacement de l'élément select avec un élément ul et l'utilisation d'un élément radio input élément par li élément.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
