Aller au contenu principal
Guillaume Duverger Code & graphisme

Dimensionnement des champs de formulaire CSS

Votre navigateur ne supporte pas cette démonstration

La propriété field-sizing permet de déterminer la taille des éléments en fonction du contenu. En utilisant la valeur content de cette propriété, cela désactive le comportement du contrôle de forme par défaut qui conserve une taille constante. Lorsque vous utilisez un attribut HTML placeholder dans les éléments de formulaire, l'espace réservé devient le contenu.





textarea, select, input {

font-size: 1rem;
font: inherit;
field-sizing: content;
border:1px solid;
line-height: 1.5;
padding: .5rem .75rem;
max-width:50ch
    }

	
textarea { 

min-width: 20ch;
min-height: 3rlh;

}

select {
min-width: 5ch;
min-height: 1.5lh;

}

input {
  
 min-width: 6ch;
	
}