[JavaScript] [SRC] personnaliser des checkboxes

SpaceFrog · 20/03/2007, 13h04

peut aussi s'adapter pour des radios

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CheckBox personamlisées</title>
<style type='text/css'>
label.checkbox_checked {
    background: white url('checked.gif') no-repeat;    
    padding: 0px 5px 5px 25px;
    font-family:verdana;
    font:12px;
    display: block;
    margin:  0px;
 
 
 
}
label.checkbox_unchecked  {
    background: white url('unchecked.gif') no-repeat;    
    padding: 0px 5px 5px 25px;
    font-family:verdana;
    font:12px;
    display: block;
    margin:  0px ;
 
}
</style>
<script type='text/javascript'>
function Warp(obj){
obj.className=(obj.className=='checkbox_unchecked')?'checkbox_checked':'checkbox_unchecked';
mycheck=document.getElementById('checkbox_1')
mycheck.checked=!mycheck.checked
}
</script>
 
</head>
 
<body><br/>
<label  id="label_1" class="checkbox_unchecked" onclick="Warp(this)">Ceci est en fait un label</label>
<input name="checkbox_1" id="checkbox_1" type="checkbox"  style='z-index:10;visibility:hidden;' />    
 
<br/><br/>
<input type="button" onclick="alert(document.getElementById('checkbox_1').checked)" value="verifie le check" />
 
</body>
 
</html>

en cadeau les deux gifs ...

Bisûnûrs · 20/03/2007, 13h55

Je viens de me faire un petit code qui prend beaucoup moins de place.

Code :

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

1
2
3
4
function changeCheck(objImg, objCheck){
   objImg.src       = (objCheck.checked) ? "unchecked.gif" : "checked.gif";
   objCheck.checked = (objCheck.checked) ? "" : "checked";
}

Code html :

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

1
2
3
4
5
<div style="position:relative">
   <input type="checkbox" id="check1" name="check1" style="visibility:hidden" />
   <img id="img1" src="unchecked.gif" style="position:absolute;left:0" onclick="changeCheck(this, document.getElementById('check1'))" />
   <label onclick="changeCheck(document.getElementById('img1'), document.getElementById('check1'))">Ceci est un label</label>
</div>

SpaceFrog · 20/03/2007, 14h06

en fait l'idée de depart est de faire un truc qui utilisait le for ...
cela doit être possible en mettant l'inpout checkbox en visible mais masqué derrière le lable en position relative de z-index inférieur...

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CheckBox personamlisées</title>
<style type='text/css'>
.checkbox_checked {
	background: white url('checked.gif') no-repeat;	
	padding: 0px 5px 5px 25px;
	font-family:verdana;
	font:12px;
	display: block;
	margin:  0px;
	position: absolute;
	z-index:10;	
 
 
 
}
.checkbox_unchecked  {
	background: white url('unchecked.gif') no-repeat;	
	padding: 0px 5px 5px 25px;
	font-family:verdana;
	font:12px;
	display: block;
	margin:  0px ;
	position: absolute;
	z-index:10;
 
}
</style>
<script type='text/javascript'>
function Warp(obj){
obj.className=(obj.className=='checkbox_unchecked')?'checkbox_checked':'checkbox_unchecked';
}
</script>
 
</head>
 
<body><br/>
<div style="position:absolute;top:100px; left:300px;width:200px;">
<label id="label_1" for='checkbox_1'  class="checkbox_unchecked" onclick="Warp(this)">Ceci est en fait un label</label>
<input name="checkbox_1" id="checkbox_1" type="checkbox"  style="positon:absolute;top:0em;left:0em;z-index:1;"  />	
</div>
<br/><br/>
<input type="button" onclick="alert(document.getElementById('checkbox_1').checked)" value="verifie le check" />
 
</body>
 
</html>

Bisûnûrs · 20/03/2007, 14h26

Dans mon code, j'ai essayé comme ça :

Code html :

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

1
2
3
4
5
<div style="position:relative">
   <input type="checkbox" id="check1" name="check1" onchange="changeCheck(document.getElementById('img1'), this)" />
   <img id="img1" src="unchecked.gif" style="position:absolute;left:0px" onclick="changeCheck(this, document.getElementById('check1'))" />
   <label for="check1">Ceci est un label</label>
</div>

Mais le for du label lance le check avant la fonction onchange, donc ce qui fait qu'elle ne change pas d'état. :/

E.Bzz · 20/03/2007, 14h31

Citation:

Envoyé par Bisûnûrs

Mais le for du label lance le check avant la fonction onchange, donc ce qui fait qu'elle ne change pas d'état. :/

Sous IE en tous cas, avec le label, il faut utiliser onclick plutôt que onchange dans l'input ...

A+

Bisûnûrs · 20/03/2007, 14h37

Citation:

Envoyé par E.Bzz

Sous IE en tous cas, avec le label, il faut utiliser onclick plutôt que onchange dans l'input ...

Ca ne change apparemment rien du tout, j'ai le même comportement.

E.Bzz · 20/03/2007, 14h47

Il me semblait que onchange ne réagissait qu'à une modif de l'utilisateur (pas via un script)

Bisûnûrs · 23/03/2007, 00h19

http://josselin.willette.free.fr/cod...ces/gestform2/

Hop, je me suis fait un petit formulaire complet entièrement personnalisé.

Celui du haut est celui par défaut et celui du bas est le personnalisé.

Il est entièrement fonctionnel et utilise peu de Javascript, et pour le peu qu'il en utilise, rien de bien méchant.

Maintenant suffit de trouver une solution convenable pour les type file.

haltabush · 23/03/2007, 08h38

Pour les types files, a mon avis il n'y a pas tellement de possibilité...
Un truc que j'ai remarqué avec le Select aussi : quand il est ouvert et qu'on clique en dehors, il ne se ferme pas. Un petit bout de JS en plus sera nécessaire ^^

SpaceFrog · 23/03/2007, 09h01

sur firefox le texte depasse du select ...

Bisûnûrs · 23/03/2007, 09h04

Citation:

Envoyé par SpaceFrog

sur firefox le texte depasse du select ...

Hum, pas si tu fais un Ctrl+0 pour remettre la taille de police par défaut.

Faudra que je gère ça ...

Bisûnûrs · 09/08/2007, 10h33

Customisation du bouton Parcourir ...

http://josselin.willette.free.fr/cod...s/btparcourir/

E.Bzz · 09/08/2007, 10h52

Citation:

Envoyé par Bisûnûrs

Customisation du bouton Parcourir ...

Idem

Bisûnûrs · 09/08/2007, 10h59

Citation:

Envoyé par E.Bzz

Idem

Mon code est quand même moins compliqué.

E.Bzz · 09/08/2007, 11h07

Citation:

Envoyé par Bisûnûrs

Mon code est quand même moins compliqué.

Clairement

Et puis surtout c'est "ton code", alors que celui-ci n'est pas "le mien".
Je m'étais contenté de garder ça sous le coude en cas de besoin

A+

Bisûnûrs · 09/08/2007, 11h14

J'ai rajouté dans le fichier précédent le fait d'afficher ou non le nom du fichier après l'avoir sélectionné.

Auteur · 09/08/2007, 11h58

Citation:

Envoyé par Bisûnûrs

Customisation du bouton Parcourir ...

hum, en cliquant juste à côté du bouton, j'ai un curseur qui apparait et je peux taper tout ce que je veux... sans voir ce que j'écris car c'est du blanc sur fond blanc

Bisûnûrs · 09/08/2007, 12h05

Citation:

Envoyé par Auteur

hum, en cliquant juste à côté du bouton, j'ai un curseur qui apparait et je peux taper tout ce que je veux... sans voir ce que j'écris car c'est du blanc sur fond blanc

J'ai corrigé en mettant onkeypress="return false" et onmousedown="return false"

Bisûnûrs · 20/10/2007, 16h37

J'ai mis à jour l'URL :

http://josselin.willette.free.fr/cod...ces/gestform2/

J'utilise un minimum de Javascript (20 lignes) et j'ai réussi à utiliser l'attribut for de la balise label pour les radiobuttons et les checkboxes.

Auteur · 22/10/2007, 14h59

le champ file a un bug : je peux taper tout ce que je veux (sans voir ce que je tape) et lorsque je réalise un onblur le texte apparaît.

Tu devrais peut-être mettre en lecture seule les éléments input_text_file et input_file, puisque que c'est le bouton parcourir qui est censé remplir ce(s) champ(s).

Sinon un truc m'intrigue : comment as-tu personnalisé le bouton "Parcourir" de l'input file

?

Bravo pour ce code

23/03/2007, 09h01	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 119 Points : 45 278 Points : 45 278	sur firefox le texte depasse du select ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

20/03/2007, 14h47	#7
E.Bzz Responsable Modération Inscription : janvier 2007 Messages : 9 315 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Secteur : Finance Informations forums : Inscription : janvier 2007 Messages : 9 315 Points : 15 609 Points : 15 609	Il me semblait que onchange ne réagissait qu'à une modif de l'utilisateur (pas via un script)
	00

23/03/2007, 00h19	#8
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	http://josselin.willette.free.fr/cod...ces/gestform2/ Hop, je me suis fait un petit formulaire complet entièrement personnalisé. Celui du haut est celui par défaut et celui du bas est le personnalisé. Il est entièrement fonctionnel et utilise peu de Javascript, et pour le peu qu'il en utilise, rien de bien méchant. Maintenant suffit de trouver une solution convenable pour les type file.
	00

23/03/2007, 08h38	#9
haltabush Membre chevronné Développeur Web Inscription : avril 2005 Messages : 726 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : avril 2005 Messages : 726 Points : 790 Points : 790	Pour les types files, a mon avis il n'y a pas tellement de possibilité... Un truc que j'ai remarqué avec le Select aussi : quand il est ouvert et qu'on clique en dehors, il ne se ferme pas. Un petit bout de JS en plus sera nécessaire ^^
	00

09/08/2007, 10h33	#12
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Customisation du bouton Parcourir ... http://josselin.willette.free.fr/cod...s/btparcourir/
	00

09/08/2007, 11h14	#16
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	J'ai rajouté dans le fichier précédent le fait d'afficher ou non le nom du fichier après l'avoir sélectionné.
	00

20/10/2007, 16h37	#19
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	J'ai mis à jour l'URL : http://josselin.willette.free.fr/cod...ces/gestform2/ J'utilise un minimum de Javascript (20 lignes) et j'ai réussi à utiliser l'attribut for de la balise label pour les radiobuttons et les checkboxes.
	00

22/10/2007, 14h59	#20
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 796 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 796 Points : 5 119 Points : 5 119	le champ file a un bug : je peux taper tout ce que je veux (sans voir ce que je tape) et lorsque je réalise un onblur le texte apparaît. Tu devrais peut-être mettre en lecture seule les éléments input_text_file et input_file, puisque que c'est le bouton parcourir qui est censé remplir ce(s) champ(s). Sinon un truc m'intrigue : comment as-tu personnalisé le bouton "Parcourir" de l'input file ? Bravo pour ce code
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email