Forum d'entraide PHPFrance

Bonjour,

Je souhaite ajouter une couleur au background de mon élément option sélectionné (celui qui a l'état selected)

Pour se faire, j'ai fait ceci :

css

option[selected] 
{
background-color:#FF0; 
}

html

<select>
<option selected="selected">item1</option>
<option>item2</option>
<option>item3</option>
</select>

J'obtiens un comportement spécial en effet je vois la couleur que si le focus en quelque sorte est sur la liste sinon la couleur d'arrière plan n'est pas visible, bizarre ...

Problème connu ? Quelqu'un a une idea ?

d o_o k

Essaye comme ca mais je ne sais pas si c'est valide:

<option value="1">Option 1</option>

select option[value="1"]{
    background: red;
}

Hello,

Non ça ne marche pas malheureusement mais merci quand même.

Je sèche là...

Ok, ok, tu veux changer la fond au clic alors dans ce cas, essaye ca:

option:checked {
  color: red;
}

Salut,

Même résultat que pour selected. Il faut que je resélectionne ma liste pour voir la background mais dans l'intervalle j'ai trouvé 2 méthodes, une propre à mon problème et une plus générale qui peut aider donc dans le doute je poste.

Dans mon cas je teste l'existence de ma variable. Si sur le onchange la valeur est vide ca veut dire que ma variable existe mais est vide. En revanche si on poste une value alors ma variable existe et contient quelque chose du coup j'ai pu écrire ceci au niveau de mon select :

<?php if (!empty($variable)) { echo ' style="background:red"'; } ?>

autrement l'autre solution s'il n'y a pas de submit c'est de fixer la valeur sur un onclick donc toujours en javascript.
via ajax :
[javascript]var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
var options = this.children;
for(var i=0; i < this.childElementCount; i++){
options.style.color = 'white';
}
var selected = this.children[this.selectedIndex];
selected.style.color = 'red';
}, false);[/javascript]

ou à made-in-home
[javascript]<script type='text/javascript'>
function set(couleur){
document.getElementById('choix1').className=couleur;
}
</script>
<style type="text/css">
.vert {
background-color: green;
}

.bleu {
background-color: blue;
}

.rouge {
background-color: red;
}

</style>
<table>
<caption> Loto foot : </caption>
<tr>
<td>Saint Etienne-Marseille</td>
<td>
<form method="post" action="traitement.php">
<select name="choix" id="choix1" class="vert"><!-- Tu dois mettre la meme class que le premier <option> -->
<option value="domicile" class="vert" onClick="set('vert')">1</option>
<option value="nul" class="bleu" onClick="set('bleu')">N</option>
<option value="exterieur" class="rouge" onClick="set('rouge')">2</option>
</select>
</form>
</td>
</tr>
</table>
[/javascript]

un autre exemple ici : http://pro.org.uk/classified/Directory? ... tegory=120

En espérant que ça serve

Encore merci Juliette pour aide !