Gibt es eine einfache Möglichkeit, den HTML-Textbereich und den Eingabetyptext gleich breit zu machen?

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

  •  09-06-2019
  •  | 
  •  

Frage

Gibt es eine einfache Möglichkeit, einen HTML-Textbereich und einen Eingabetyp = „Text“ mit (ungefähr) gleicher Breite (in Pixeln) darzustellen, die in verschiedenen Browsern funktioniert?

Eine CSS/HTML-Lösung wäre brillant.Ich würde es vorziehen, kein Javascript verwenden zu müssen.

Danke /Erik

War es hilfreich?

Lösung

Sie sollten in der Lage sein, es zu verwenden

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

Andere Tipps

Um die erste Frage zu beantworten (obwohl sie zu Tode beantwortet wurde):Eine CSS-Breite ist das, was Sie brauchen.

Aber ich wollte antworten Gaius' Frage in den Antworten.Gaius, dein Problem ist, dass du die Breite in Geviert einstellst.Dies ist eine gute Idee, aber Sie müssen bedenken, dass Ems auf der Schriftgröße basieren.Standardmäßig haben ein Eingabebereich und ein Textbereich unterschiedliche Schriftarten und -größen.Wenn Sie also die Breite auf 35em einstellen, verwendet der Eingabebereich die Breite seiner Schriftart und der Textbereich die Breite seiner Schriftart.Die Standardschriftart des Textbereichs ist kleiner, daher ist das Textfeld kleiner.Legen Sie entweder die Breite in Pixeln oder Punkten fest oder stellen Sie sicher, dass Eingabefelder und Textbereiche dieselbe Schriftart und -größe haben:

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

Hoffentlich hilft das.

Jemand anderes hat dies erwähnt und es dann gelöscht.Wenn Sie alle Textbereiche und Texteingaben ohne Klassen auf die gleiche Weise formatieren möchten, verwenden Sie das folgende CSS (funktioniert nicht in IE6):

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

Dies ist eine CSS-Frage:Die Breite umfasst die Rahmen- und Füllbreiten, die in verschiedenen Browsern unterschiedliche Standardwerte für INPUT und TEXTAREA haben, also machen Sie auch diese gleich:

<!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>

Dies ist im beschrieben Abmessungen der Box Abschnitt der CSS-Spezifikation, der besagt:

Die Boxbreite ergibt sich aus der Summe aus linkem und rechtem Rand, Rand und Innenabstand sowie der Inhaltsbreite.

Verwenden Sie CSS3, damit Textfeld und Eingabe gleich funktionieren.Sehen jsFiddle.

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

Ja da ist.Versuchen Sie etwas wie folgt zu tun:

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

Beide sollten gleich groß sein.Sie können dies mit absoluten Größen (px), relativen Größen (em) oder prozentualen Größen tun.

Nur eine Anmerkung: Die Breite wird immer davon beeinflusst, was auf der Clientseite passiert. PHP kann solche Dinge nicht beeinflussen.

Das Festlegen einer gemeinsamen Klasse für die Elemente und das Festlegen einer Breite in CSS ist die sauberste Lösung.

Verwenden Sie eine CSS-Klasse für die Breite und platzieren Sie Ihre Elemente dann in HTML-DIVs, wobei DIVs die genannte Klasse haben.

Auf diese Weise sollte die Layoutkontrolle insgesamt besser sein.

Wie erwähnt in Ungleiche HTML-Textfeld- und Dropdown-Breite mit XHTML 1.0 strikt es hängt auch von Ihrem Dokumenttyp ab.Mir ist aufgefallen, dass bei Verwendung von XHTML 1.0 strict der Unterschied in der Breite tatsächlich auftritt.

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

Wenn Sie heutzutage Bootstrap verwenden, geben Sie Ihren Eingabefeldern einfach das form-control Klasse.Etwas wie:

<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>

Sie können auch das folgende CSS verwenden: 

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

HTML:

<input class="mywidth" >
<textarea></textarea>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top