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

Question

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

Answer 1

Utilisez simplement:

textarea {
    width: 200px;
}

ou

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

Selon ce que tu veux dire par "champ de texte".

Answer 2

Votre balisage:

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

Le CSS:

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

Gardez à l'esprit que la taille du champ de texte est une "victime" du W3C modèle de boîte. Ce que je veux dire par la victime, c'est que la hauteur et la largeur d'une zone de texte est la somme de la hauteur/largeur des propriétés affectées ci-dessus, outre le rembourrage hauteur/largeur, et la largeur de la bordure. Pour cette raison, les boîtes de texte sera légèrement différentes tailles dans différents navigateurs en fonction de la valeur par défaut de rembourrage dans les différents navigateurs. Bien que les différents navigateurs ont tendance à définir les différents rembourrage pour les zones de texte, plus de réinitialisation des feuilles de style n'ont pas tendance à inclure <input /> tags dans leur réinitialiser les feuilles, donc c'est quelque chose à garder à l'esprit.

Vous pouvez normaliser ce par la définition de vos propres rembourrage. Ici est votre CSS avec rembourrage, de sorte que la zone de texte semble le même dans tous les navigateurs:

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

J'ai ajouté 1 pixel rembourrage parce que certains navigateurs ont tendance à faire de la zone de texte rechercher trop entassés si le rembourrage est 0px. En fonction de votre conception, vous pouvez ajouter encore plus de rembourrage, mais il est fortement recommandé que vous définissez le rembourrage vous-même, sinon, vous serez en laissant aux différents navigateurs pour décider pour eux-mêmes. Pour encore plus de cohérence entre les différents navigateurs, vous devez également définir la frontière de vous-même.

Answer 3

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

Answer 4

Votre zone de texte code:

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

Votre code CSS:

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

ou

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

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

Answer 5

Les éléments peuvent être de taille avec l' height et width attributs.