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 ?
Vous pouvez le faire, mais sachez que cela modifiera toutes les entrées de sélection dans le code html, cela ne modifie pas le bleu en survol, mais cela stylise tout le reste.
option {
background: #1b1a1a !important;
color: #357b1d !important;
}
select {
background: #1b1a1a !important;
color: #357b1d !important;
}
// If you also want to theme your text inputs:
input {
background: #1b1a1a !important;
color: #357b1d !important;
}
<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>
Je sais que cette question est ancienne, mais j'ai récemment rencontré ce besoin et j'ai trouvé la solution suivante en utilisant jQuery et CSS :
jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);et la css :
.highlight {
background-color:#333;
cursor:pointer;
}Peut-être cela aidera-t-il quelqu'un d'autre.
C'est ce dont vous avez besoin, le combinateur d'enfants :
select>option:hover
{
color: #1B517E;
cursor: pointer;
}Essayez-le, il fonctionne parfaitement.
Voici la référence : http://www.w3schools.com/css/css_combinators.asp
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.
