Select & Background-color sur firefox

**Cronycs** · 29/05/2007, 17h10

Bonjour bonjour,

donc voila j'ai un petit problème avec l'affichage de couleurs pour les éléments d'un select uniquement sur Firefox. J'ai ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<select name="idType" id="idType" style="width: 200px;" onchange="changeDateFin();">
<option value="0">Aucun</option>
<option value="15" style="background-color: rgb(255, 51, 0);">Contre visite [15]</option>
<option value="29" style="background-color: rgb(102, 153, 204);">fiabilis [30]</option>
<option value="33" selected="selected" style="background-color: rgb(255, 102, 255);">message [60]</option>
<option value="16" style="background-color: rgb(255, 255, 0);">Visite Initiale [30]</option>
<option value="17" style="background-color: rgb(102, 255, 255);">Visite Pollution [15]</option>
 
</select>

Lorsque je clic sur la petit flèche pour affiché tous les éléments de mon select j'ai bien les couleurs qui s'affiche, MAIS si j'en sélectionne un, l'élément n'est plus en couleur !

Si quelqu'un voit d'où cela pourrai venir ? Merci d'avance

**Bisûnûrs** · 30/05/2007, 07h41

Sur Firefox, la couleur qui apparaît quand la liste déroulante n'est pas déroulée, c'est le background du select et non des option.

Tu peux changer dynamiquement cette couleur avec un poil de Javascript :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<select name="idType" id="idType" style="width: 200px;" onchange="changeDateFin();this.style.background=this.options[this.selectedIndex].style.background">
   <option value="0" style="background-color: rgb(255, 255, 255);">Aucun</option>
   <option value="15" style="background-color: rgb(255, 51, 0);">Contre visite [15]</option>
   <option value="29" style="background-color: rgb(102, 153, 204);">fiabilis [30]</option>
   <option value="33" selected="selected" style="background-color: rgb(255, 102, 255);">message [60]</option>
   <option value="16" style="background-color: rgb(255, 255, 0);">Visite Initiale [30]</option>
   <option value="17" style="background-color: rgb(102, 255, 255);">Visite Pollution [15]</option>
</select>

Note que j'ai aussi défini une couleur blanche au premier élément, sinon il prendrait la couleur du select également.

**Cronycs** · 30/05/2007, 09h41

C'est bien ce que je pensais, mais vu que je suis mauvais en javascript je n'avais pas réussi a le faire ^^"

Merci beaucoup ca fonctionne

, mais par contre, au 1er affichage ca ne me met pas la couleur de l'élément sélectionné, il faut le reselectionner dans la liste pour qu'il mette la couleur dans le select

**Bisûnûrs** · 30/05/2007, 09h46

C'est parce que le Javascript là ne se lance que sur le onchange du select.

Tu peux rajouter ça dans la balise body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="document.getElementById('iddetonselect').style.background=document.getElementById('iddetonselect').options[document.getElementById('iddetonselect').selectedIndex].style.background">

**Cronycs** · 30/05/2007, 09h50

Ne pouvant pas utilisé la balise unload de mon body étant donné que j'utilise un format de page special et que le formulaire sur lequel je travail est inclus dans une autre page.

J'ai reussi a palier au problème comme ceci, j'ai ajouter la fonction la :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
 
function changeBGcolor(){
	document.getElementById('idType').style.background = document.getElementById("idType").options[document.getElementById("idType").selectedIndex].style.background;
 
}
 
</script>

dans mon select j'ai mis :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name="idType" id="idType" style="width:200px;" onchange="changeDateFin(); changeBGcolor();">

et enfin a la fin de ma page :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
 
 changeBGcolor();
 
</script>

ca en fait beaucoup pour pas grand chose !

En tout cas merci beaucoup pour l'aide ! ^^

Select & Background-color sur firefox

CSS

Discussions similaires

Partager

Partager