Est-il un moyen simple de faire de html textarea et le type de saisie de texte tout aussi large?

StackOverflow https://stackoverflow.com/questions/28713

  •  09-06-2019
  •  | 
  •  

Question

Est-il un moyen simple d'obtenir un HTML textarea et un input type="text" rendre avec (à peu près) la même largeur (en pixels), qui travaille dans les différents navigateurs?

Un CSS/HTML solution serait génial.Je préférerais ne pas avoir à utiliser de Javascript.

Merci /Erik

Était-ce utile?

La solution

Vous devriez être en mesure d'utiliser

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

Autres conseils

Pour répondre à la première question (bien qu'il ait été répondu à la mort):Un CSS largeur est ce que vous avez besoin.

Mais j'ai envie de répondre Gaius est question dans les réponses.Gaius, vous êtes le problème, c'est que vous êtes le réglage de la largeur de l'em de l'.C'est une bonne chose que de le faire, mais vous devez vous rappeler que les em sont basés sur la taille de la police.Par défaut, une zone de saisie et un textarea ont différentes polices et tailles.Ainsi, lorsque vous définissez la largeur de 35em, la zone de saisie est à partir de la largeur de la police et le textarea est à partir de la largeur de la police.La zone de texte par défaut de la police est plus petite, donc la zone de texte est plus petit.Définir la largeur en pixels ou de points, ou de s'assurer que les boîtes de saisie et les textareas ont la même face à la police et taille:

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

Espérons que cela aide.

Quelqu'un d'autre a mentionné cela, puis l'a supprimé.Si vous voulez le style de tous les textareas et des saisies de texte de la même façon sans classes, utiliser le code CSS suivant (ne fonctionne pas dans IE6):

input[type=text], textarea { width: 80%; }

C'est un CSS question:la largeur inclut la frontière et le rembourrage largeurs, qui ont des valeurs par défaut pour l'ENTRÉE et la TEXTAREA dans les différents navigateurs, afin de rendre ces la même chose ainsi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>

Ceci est décrit dans le Dimensions de la boite la section de la spécification CSS, qui dit:

La largeur de la boîte est donnée par la somme des marges gauche et droite de la frontière, et le rembourrage, et le contenu de la largeur.

Utiliser CSS3 pour faire de zone de texte et le travail de saisie de la même.Voir jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Oui, il est.Essayez de faire quelque chose comme ceci:

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

Les deux doivent correspondre à la même taille.Vous pouvez le faire avec des dimensions absolues (px), tailles relatives (em) ou en pourcentage de tailles.

Juste une remarque - la largeur est toujours influencé par quelque chose qui se passe du côté client PHP peut pas l'effet de ces sortes de choses.

Définition d'une classe commune sur les éléments et la définition de la largeur dans le CSS est votre propre pari.

Utiliser une classe CSS pour la largeur, puis placez vos éléments HTML de la Vrd, Vrd ayant la catégorie.

De cette façon, le contrôle de mise en page globale devrait être mieux.

Comme mentionné dans L'inégalité de zone de texte Html et déroulante largeur avec XHTML 1.0 strict cela dépend aussi de votre type de document.J'ai remarqué que lors de l'utilisation de XHTML 1.0 strict, la différence de largeur ne semblent, en effet.

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

Ces jours, si vous utiliser bootstrap, il suffit de donner vos champs d'entrée de l' form-control classe.Quelque chose comme:

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

vous pouvez également utiliser la syntaxe suivante CSS: 

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top