Discussion :

[laurentSc]

Bonjour,

j'ai un formulaire html qui comporte plusieurs champs, dont un champ de type checkbox et un de type reset. Ces 2 champs ont des apparences fort différentes. Avec Firefox, le checkbox est un petit carré et le reset a le look d'un champ de type text, mais de petite longueur (rien à voir, et je souhaite que les 2 soient similaires). Comment faire ?

[Invité]

Bonjour,

• "checkbox personnalisé css"

[Manequin]

Bonjour, tu utilise le html+css standard? Si oui. Je te propose de jetter un coup d'oeil du côté de bootstrap.

Cordialement.

[laurentSc]

J'ai déjà regardé bootstrap mais n'avais pas réussi à l'utiliser donc je vais probablement me contenter d'une solution trouvée sur le net...

[laurentSc]

Malgré ce long silence, je suis toujours sur ce problème et ça en reste un...

D'abord, j'ai eu l'opportunité d'apprendre à utiliser bootstrap mais rien trouvé pour modifier le look du bouton reset.

M'est venue une autre idée : plutôt qu'un input de type reset dont je n'arrive pas à modifier l'apparence, je créé un simple <button> avec un onclick qui permettra de remettre à 0 les valeurs

Code html :

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

1
2
3
4
5
6
7
 
<label class="" for="login2">Username</label>
					<input class="left-margin width_form" id="login2" type="text" value="" name="login2" />
				  </p> 
<button name="reset" onclick="login2.value=\"\"" value="">
			 reset
			 </button>

et je devrais pouvoir styliser ce bouton. Le souci, c'est que ce bouton a aussi le même comportement qu'un input de type submit : si on clique dessus, ça appelle l'action du formulaire donc comment faire que ça ne soit pas le cas ?

Voici le code complet du formulaire :

Code html :

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
<form id="authform"  action="<?php echo SITE_URL_HTTP;?>/pagesave/authenticate.php" method="post">
				<!--<form id="authform"  method="post">-->
				<fieldset id="form-area1">
						<p>
				<a href="http://www.schneider-electric.com/b2b/en/campaign/life-is-on/life-is-on.jsp" target="_blank">
				<img  src="<?php echo SITE_URL_HTTP; ?>/images/logo/LifeIsOn1x30_transparent.jpg" alt=''/></a>
				<?php echo $str[323]; ?>  <h2><!--<i class="fa fa-user-o" aria-hidden="true"></i>-->
			 LOGIN</h2></p>
			 <button name="reset" id="btreset" class="left-margin2" onclick="login2.value=\"\"">
			 reset
			 </button>
 
				  <p>
					<label class="" for="login2">Username</label>
					<input class="left-margin width_form" id="login2" type="text" value="" name="login2" />
				  </p>
				  <p>
					<label for="pwd2">Password</label>
					<input class="left-margin width_form" id="pwd2" type="text" value="" name="pwd2" /></p>
					<p>
					<label for="remember"><?php echo $str[324]; ?></label>
					<input class="left-margin width_form2"  id="remember" type="checkbox"  name="remember"/></p>
					<p>
					<label for="btreset"><?php echo "reset"; ?></label>
					<!--<input class="left-margin width_form2 margin_top_form3"  type="reset" value="" name="btreset">-->
 
					</p>
					<p>
					<label for="goauth"><?php echo $str[351]; ?></label>
					<input  id="goauth" class="margin_top_form1" type="submit" value="<?php echo "";?>" name="goauth" />				 
				  </p>
				</fieldset>
				</form>

Le CSS, c'est que des margin et des width ; j'ai désactivé le reste et ça fait pareil.

[Invité]

Bonjour Laurent,

1- Ça t'arrive de LIRE la DOC ?

• <button> ( regarde à l'attribut : type)

2- Quant aux checkbox, je t'ai dit quoi chercher.

3- Tu parles d'"apparence", alors que tu ne montres PAS UNE SEULE ligne de CSS...
(même pas une copie d'écran)



Allez : les vacances sont finies !! Au boulot !