Personnalisation de la flèche select form [Résolu]

[steeve.c]

Bonjour,

J'utilise un script pré construit qui me comble presque parfaitement. L'idée étant de personnaliser la flèche select d'un formulaire.

A la base mon texte est gris clair, et j'aimerais qu'il devienne noir dés que la sélection est faite. Malheureusement, ce script cache le vrai champ select de formulaire et montre un span par dessus.

Voici le script Javascript:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
$(document).ready(function(){	
 
    if (!$.browser.opera) {
 
        $('select.select').each(function(){
            var title = $(this).attr('title');
            if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
            $(this)
                .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
                .after('<span class="select">' + title + '</span>')
                .change(function(){
                    val = $('option:selected',this).text();
                    $(this).next().text(val);
                    })
		});
 
 
 
    };
 
});
 
</script>

Dans ma page j'écris quasiment de façon classique le champ de formulaire:

Code :

1
2
3
4
5
6
7
8
<div style="position:relative; margin-bottom:10px">
  <select name="titre" id="titre"  class="select">
    <option value="0" <?php if($id_utilisateur == 0){ ?>selected="selected"<?php } ?>>Titre</option>
    <option value="1 ">Mr</option>
    <option value="2">Madame</option>
    <option value="3">Mademoiselle</option>
  </select>
  </div>

Voici un apercu de ce que ca donne:

Etape1:


Etape2:


Etape3:


Comment puis-je changer la couleur Police de Mademoiselle en noir ?

Merci

[Golgotha]

Bonjour,

Sur le "onChange" de ton select, tu ne peux pas gérer la mise en forme ?

(C'est possible d'avoir la totalité de la page HTML ?)

[Hijack]

Bonjour steeve,

tu as dans ton code javascript à la ligne 12 la méthode :

.change(function{...})

C'est cette méthode qui va détecter le changement dans ton <select></select>. Tu peux donc appliquer une couleur différente au texte lorsque ce changement est détecté :

Code :

1
2
3
4
5
6
 
.change(function(){
                    val = $('option:selected',this).text();
                    $(this).next().text(val);
                    $(this).next().css('color', 'black'); //Ajoute une couleur noir aux  textes.
                    })

[steeve.c]

Wahou ! Rapide et efficace !

Merci Hijack, ça marche parfaitement !

Merci aussi Golgotha

La page est ici:
http://cluster003.ovh.net/~kitaentr/...p?page=contact