Personnalisation de la flèche select form

**steeve.c** · 07/11/2011, 14h10

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>