Discussion :

[laurentSc]

Bonjour,

je n'arrive pas à changer la largeur des input d'un formulaire que ce soit avec l'attribut size ou avec le width du CSS. Comment faire ?

Code html :

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

<input class="left-margin width_form margin_top_form2" id="login2" type="text" size="1" value="" name="login2" />

Code css :

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

1
2
3
.width_form {
	width:3px;
}

[JefReb]

Bonjour Laurent
Suis pas expert et je n'ai pas fait beaucoup de formulaires, mais en essayant par exemple:

Code css :

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

1
2
3
4
5
input
{
  height: 50px;
  width: 3px;
}

ou bien:

Code css :

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

1
2
3
4
5
.taille
{
  height: 50px;
  width: 3px;
}

Code html :

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

<input class="taille" type="text" />

Mais comme le dit Headmax dans le post suivant tu as peut être un conflit css qui contrarie ton code.

[headmax]

Salut as tu essayé min-width as regardé si tu as pas un conflit CSS aussi.
démo: input dynamique
https://codepen.io/headmax/pen/baLLzB

[laurentSc]

Pourquoi comme d'habitude JefReb ?

Ta réponse fonctionne bien, même mieux que celle de Headmax...https://codepen.io/laurentsc/pen/WdMzVg mais ça sent bien le conflit CSS car dans mon contexte, si je peux bien régler la hauteur des input, pas la largeur

Code html :

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

<input class="width_form " id="login2" type="text" size="1" placeholder="" value="" name="login2" />

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
/*body {text-align:center; padding:20px}*/
.width_form {
  /*min-width:3px!important;
max-width:99.99%!important;
    transition: width 0.25s;
  text-align:center;*/
 
  height: 5px;
  width:5px;
  /*font-size: 3.5em;*/
 
}

et sinon, pour JefReb, je pensais régler un souci en une heure et passer à la V8 du menu : https://www.developpez.net/forums/d1.../menu-flex-ie/ mais justement, j'avais codé un site de test mais ça a été perdu ; j'avais une sauvegarde, sauf pour le menu (!). J'ai donc voulu mettre la V7 à la place mais je dois me battre avec des problèmes CSS et l'heure va en fait prendre plusieurs jours vu que j'y ai déjà passé la journée...

Avez-vous une idée pour trouver les conflits ? J'ai essayé de trouver avec Firebug mais rien trouvé..

[JefReb]

Non Laurent, j'ai supprimé le "comme d'habitude", mais comme Jérôme me reprends régulièrement, je ne suis qu'un développeur du dimanche et parfois je ne vois pas le problème.
c'est un commentaire très amicale et j'aime bien être repris ...
Pour ton soucis, je viens de tester ton code et cela fonctionne. C'est donc certainement un conflit css.
Moi j'utilise f12 de Firefox pour chercher les conflits (anciennement Firebug je crois) et en général on trouve assez facilement les css en cascade qui se chevauchent.
Mais bon je suis prudent maintenant avec ce que j'avance.
J'espère que ça va t'aider.
Pour la V8, je regarderai quand tu t'y remettras.

Par contre, je rajoute que dans ton codepen, tu as un * devant min-width ...

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
/*body {text-align:center; padding:20px}*/
.width_form {
  *min-width:3px!important;
max-width:99.99%!important;
    transition: width 0.25s;
  text-align:center;
 
  height: 5px;
  width:5px;
  /*font-size: 3.5em;*/
 
}

[NoSmoking]

Bonjour,
vous oubliez quelque chose de fondamental qui le style par défaut appliqué par les navigateurs en d'autre mot il vous faut faire un « reset » minimum, par exemple en ajoutant

Code :

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

1
2
padding: 0;
box-sizing: border-box;

On peut toutefois s’interroger sur la nécessité d'une si petite largeur sur un <input> qui par défaut est un champ de saisie de texte !

[laurentSc]

Moi j'utilise f12 de Firefox pour chercher les conflits (anciennement Firebug je crois)

Pas si ancien que ça vu qu'il y a 30 secondes c'était encore le cas !

je ne suis qu'un développeur du dimanche

Bienvenu au club !

NoSmoking, je viens de tester ton retour.
D'abord, en quoi tes 2 lignes ressettent quelque chose ?

Le input de 1px, il est évident que ce n'est pas le but mais juste un essai pour être sûr de la prise en compte.

Mon souci actuel est que je n'arrive pas à modifier la largeur des inputs et elle est trop petite (!).

Pour investiguer, j'ai regardé ce que me disait Firebug (la touche F12 !) et :

Code css :

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
#form-area1 input:not([type="submit"]) {
    border: 1px inset #decfbb;
    box-shadow: 0 10px 10px #6f5430 inset;
    padding: 6px 20px;
}
#form-area1 input {
    background: transparent none repeat scroll 0 0;
    border-radius: 50px;
    display: inline-block;
}
.margin_top_form1 {
    margin-top: 5px;
}
.width_form {
    box-sizing: border-box;
    font-size: 3.5em;
    height: 14px;
    padding: 0;/* barré */
    width: 50px;
}
.left-margin {
    margin-left: 120px;
}
* {
    border: 0 none;/* barré */
    margin: 0;/* barré */
    padding: 0;/* barré */
}
inherited from fieldset#form-area1
#form-area1 {
    color: #6f5430;/* barré */
    font-family: Arial,sans-serif;
}
 
inherited from body
html, body {
    font-family: Arial,sans-serif;/* barré */
    font-size: 100%;/* barré */
 
inherited from	html
html, body {
    font-family: Arial,sans-serif;/* barré */
    font-size: 100%;/* barré */
}

Faut faire gaffe car le copier-coller enlève les lignes barrées (obligé de rajouter les commentaires /* barré */) et les inherited from (remis à la main)

Pour que ce soit clair, voici le html complet :

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
			<form id="authform"  action="<?php echo SITE_URL_HTTP;?>/page/authenticate.php" 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>
			  <p>
				<label for="login2">Username</label>
				<input class="left-margin width_form margin_top_form1" id="login2" type="text" size="1" value="<?php echo "";?>" name="login2" />
			  </p>
			  <p>
				<label for="pwd2">Password</label>
				<input class="btsubmit left-margin width_form margin_top_form2" id="pwd2" type="text" size="5" value="<?php echo "";?>" name="pwd2" /></p>
				<p>
				<label for="goauth"><?php echo $str[351]; ?></label>
				<input  id="goauth" type="submit" value="<?php echo "";?>" name="goauth" />
 
			  </p>
			</fieldset>
			</form>

et le css donné par Firebug est celui appliqué au input Username

[NoSmoking]

NoSmoking, je viens de tester ton retour.
D'abord, en quoi tes 2 lignes ressettent quelque chose ?

simplement que si tu affectes ces propriétés/valeurs aux <input> cela annulera les valeurs par défaut des navigateurs.

exemple CSS issu du fichier FireFox resource://gre-resources/forms.css

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
input {
  -moz-appearance: textfield;
  /* The sum of border and padding on block-start and block-end
     must be the same here, for buttons, and for <select> (including its
     internal padding magic) */
  padding: 1px;
  border: 2px inset ThreeDLightShadow;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: -moz-field;
  text-rendering: optimizeLegibility;
  line-height: normal;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  cursor: text;
  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
  text-indent: 0;
  -moz-user-select: text;
  text-shadow: none;
  overflow-clip-box: content-box;
}