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

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

Utilisez simplement:

textarea {
    width: 200px;
}

ou

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

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

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.

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

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.

Cela fonctionne pour moi dans IE 10 et FF 23

<input type="text" size="100" />

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.

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>

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

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.

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

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

.container {
   width: 360px;
}

.container input {
   width: 100%;
}