Discussion :

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

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

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 :

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

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 :

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

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