web-dev-qa-db-fra.com

HTML <select> option sélectionnée style CSS couleur d'arrière-plan

Existe-t-il un style pour la couleur "sélectionnée" d'une option de sélection? Par exemple:

<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;">
<OPTION>Test 1
<OPTION>Test 2
<OPTION>Test 3
<OPTION>Test 4
<OPTION>Test 5
<OPTION>Test 6
<OPTION>Test 7
</SELECT>
</FORM>
</BODY>
</HTML>

Quand je sélectionne une option, elle devient bleue, je veux remplacer ceci et Lui donner une couleur différente. Dans le style, je m'attendais à quelque chose comme "Couleur sélectionnée", mais cela n'existe pas.

javascripthtmlcss
25
arieltools

Une façon grossière de le faire - 

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);
16
N 1.1
<select name=protect_email size=1 style="background: #009966; color: #FFF;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">    
<option value=0 style="background: #009966; color: #FFF;" selected>Protect my email</option>;  
<option value=1 style="background: #FF0000; color: #FFF;">Show email on advert</option>;
</select>;

http://pro.org.uk/classified/Directory?act=book&category=120

Testé en FF, Opera, Konqueror a bien fonctionné ...

14
Master V

Actuellement, CSS ne supporte pas cette fonctionnalité.

Vous pouvez créer le vôtre ou utiliser un plug-in qui émule ce comportement à l'aide de DIV/CSS. 

2
Diodeus - James MacFarlane

Je pense que la solution que vous cherchiez peut-être est:

option:checked {
  box-shadow: 0 0 10px 100px #FFFF00 inset; }
2
Renato Camargos

Cette syntaxe fonctionnera en XHTML et ne fonctionnera pas dans IE6, mais il ne s'agit pas d'une méthode javascript:

option[selected] { background: #f00; }

Si vous voulez faire cela à la volée, vous devrez utiliser javascript, comme d'autres l'ont suggéré ....

2
automaticAllDramatic

Je réalise que ceci est un ancien post, mais au cas où cela vous aiderait, vous pouvez appliquer ce CSS pour qu'IE11 trace un contour en pointillé pour l'indication de focus d'un élément <select> afin qu'il ressemble à l'indication de focus de Firefox: select:focus::-ms-value { background: transparent; color: inherit; outline-style: dotted; outline-width: thin; }

0
Matthew Wise

En principe, vous pouvez le personnaliser en utilisant l'option [selected] comme sélecteur, mais cela ne fonctionne pas dans la plupart des navigateurs. En outre, cela vous permet uniquement de styler l'option sélectionnée, pas l'option qui a le survol actif.

Testé pour fonctionner dans Chrome 9 et Firefox 3.6, ne fonctionne pas dans Internet Explorer 8.

0
Olli Etuaho