Select & Background-color sur firefox

Version imprimable

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:

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 :)

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:

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.

30/05/2007, 09h41
Cronycs

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 :?
30/05/2007, 09h46
Bisûnûrs

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:

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

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:

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:

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

et enfin a la fin de ma page :
Code:

1 2 3 4 5 <script type="text/javascript"> changeBGcolor(); </script>
ca en fait beaucoup pour pas grand chose ! :P

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