[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

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

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

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

Envoyé par Bisûnûrs

Customisation du bouton Parcourir ...

Idem

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

Envoyé par E.Bzz

Idem

Mon code est quand même moins compliqué.

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

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

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

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

[SRC] personnaliser des checkboxes

Contribuez

Discussions similaires

Partager

Partager