Comment définir la taille d'une zone de texte HTML?

102

Comment définir la taille d'une zone de texte HTML?

user225269
la source

Réponses:

119

Utilisez simplement:

textarea {
    width: 200px;
}

ou

input[type="text"] {
    width: 200px;
}

Selon ce que vous entendez par «zone de texte».

Rowno
la source
5
note: faire juste inputredimensionnera également d'autres inputcontrôles comme les boutons
Homer
3
Une zone de texte est <input type="textbox" />et une zone de texte est <textarea></textarea>qu'il y a une différence.
Michael Garrison
Comment faites-vous cela en%?
un codeur le
2
@MichaelGarrison Vous voulez dire type="text"? Impossible de trouver type="textbox"défini nulle part: w3.org/TR/html5/forms.html#states-of-the-type-attribute
Stefan L
Oui, type="text"c'est ce que je voulais dire, je pense que je viens d'écrire ça à la hâte
Michael Garrison
36

Votre balisage:

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

Le CSS:

.resizedTextbox {width: 100px; height: 20px}

Gardez à l'esprit que la taille de la zone de texte est une «victime» du modèle de boîte W3C . Ce que je veux dire par victime, c'est que la hauteur et la largeur d'une zone de texte sont la somme des propriétés hauteur / largeur affectées ci-dessus, en plus de la hauteur / largeur du rembourrage et de la largeur de la bordure. Pour cette raison, vos zones de texte seront de tailles légèrement différentes dans différents navigateurs en fonction du remplissage par défaut dans différents navigateurs. Bien que différents navigateurs aient tendance à définir un remplissage différent pour les zones de texte, la plupart des feuilles de style réinitialisées n'ont pas tendance à inclure des <input />balises dans leurs feuilles de réinitialisation, c'est donc quelque chose à garder à l'esprit.

Vous pouvez standardiser cela en définissant votre propre remplissage. Voici votre CSS avec un remplissage spécifié, donc la zone de texte a la même apparence dans tous les navigateurs:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

J'ai ajouté un rembourrage de 1 pixel car certains navigateurs ont tendance à rendre la zone de texte trop remplie si le remplissage est de 0px. En fonction de votre conception, vous voudrez peut-être ajouter encore plus de remplissage, mais il est fortement recommandé de définir le remplissage vous-même, sinon vous laisserez à différents navigateurs le soin de décider par eux-mêmes. Pour encore plus de cohérence entre les navigateurs, vous devez également définir la bordure vous-même.

Dan Herbert
la source
11
input[type="text"]
{
    width:200px
}
tcao
la source
6

Votre code de zone de texte:

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

Votre code CSS:

input[type="text"] {
height: 10px;
width: 80px;
}

ou

.textboxclass {
height: 10px;
width: 80px;
}

Donc, vous sélectionnez d'abord votre élément avec des attributs (regardez le premier exemple) ou des classes (regardez le dernier exemple). Plus tard, vous attribuez des valeurs de hauteur et de largeur à votre élément.

Sabre laser
la source
1
Merci pour vos conseils. J'ai déjà édité ceci. J'essaierai de poser de meilleures questions.
Lightsaber
4

Cela fonctionne pour moi dans IE 10 et FF 23

<input type="text" size="100" />
joym8
la source
Non, cela ne fonctionnera pas souvent, par exemple Chrome actuel, le navigateur le plus populaire, vers 2015
Tom Stickel
3
FYI quiconque lira ceci à l'avenir, fonctionne bien dans Chrome 58 vers la mi-2017.
Rick
2

Si vous ne souhaitez pas utiliser la méthode de classe, vous pouvez utiliser la méthode parent-enfant pour apporter des modifications dans la zone de texte.

Pour par exemple. J'ai créé un formulaire dans mon formulaire div.

Code HTML:

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

Maintenant, le code CSS sera comme:

.form textarea{
    height: 220px;
    width: 342px; 

Problème résolu.

Johnny Vikrant
la source
2

Attention! L'attribut width est découpé par l'attribut max-width. Alors j'ai utilisé ...

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>
R Keene
la source
1

Essayer:

input[type="text"]{
padding:10px 0;}

C'est ainsi qu'il reste indépendant de la taille du texte définie pour la zone de texte. Vous augmentez la hauteur en utilisant plutôt un rembourrage

Erol Balci
la source
1

Essayez ce code:

input[type="text"]{
 padding:10px 0;}

De cette façon, il reste indépendant de la taille du texte définie pour la zone de texte. Vous augmentez la hauteur en utilisant plutôt un rembourrage.

madhab
la source
1

Les éléments peuvent être dimensionnés avec les attributs heightet width.

Matchu
la source
1

Vous pouvez rendre la largeur d'entrée dépendante par rapport à la largeur du conteneur.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}
Ilya Degtyarenko
la source