Wie kann die Größe eines Eingabetextfelds in HTML definiert werden?

90

Hier ist ein HTML-Eingabetextfeld:

<input type="text" id="text" name="text_name" />

Welche Optionen gibt es, um die Größe der Box zu definieren?

Wie kann dies in CSS implementiert werden?

html css input osos
quelle
Mögliches Duplikat von Wie stelle ich die Größe eines HTML-Textfelds ein?
Tony
In einigen Fällen ist nur die Einstellung max-widthausreichend
Christophe Roussy

Antworten:

127

Sie könnten seine einstellen width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

oder noch besser eine Klasse definieren:

<input type="text" id="text" name="text_name" class="mytext" />

und in einer separaten CSS-Datei das erforderliche Styling anwenden:

.mytext {
    width: 300px;
}

Wenn Sie die Anzahl der Zeichen begrenzen möchten, die der Benutzer in dieses Textfeld eingeben kann, können Sie das folgende maxlengthAttribut verwenden:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />
Darin Dimitrov
quelle
10
Außerdem: Sie können die Breite in Bezug auf "em" (und nicht "px") ändern und dann ist die Größe proportional zur Schriftgröße des Textfelds
Alexander Bird
44

Das sizeAttribut funktioniert auch

<input size="25" type="text">
Fuzzy-Analyse
quelle
8

Versuche dies

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Oder aber 

 <input type="text" id="txtbox">

mit dem css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }
Janarthanan Ramu
quelle
3
Ihre Antwort fügt nichts Neues hinzu und Sie sollten Einheiten (px, pt,% v usw.) in CSS angeben
Jon P
1
Nun, die Schriftgröße (style = "font-size: 18pt") war die, nach der ich gesucht habe, und das vergrößert auch die Größe der Box. Obwohl dies vom OP nicht ausdrücklich gefordert wird, bietet es auch einen Mehrwert.
Wolf5
Das hat funktioniert. Daher vielen Dank. Der Text scheint sich jedoch vertikal zu zentrieren. Kann ich das irgendwie verhindern?
Aaron John Sabu
@ AaronJohnSabu Entschuldigung für die Verzögerung. Versuchen Sie, die Breite zu vergrößern.
Ich
2

Sie können die Breite in Pixel über das Inline-Styling einstellen:

<input type="text" name="text" style="width: 195px;">

Sie können die Breite auch mit einer sichtbaren Zeichenlänge festlegen:

<input type="text" name="text" size="35">
betrice mpalanzi
quelle
-2 
<input size="45" type="text" name="name">

Die "Größe" gibt die sichtbare Breite in Zeichen der Elementeingabe an.

Sie können auch die Höhe und Breite von CSS verwenden.

<input type="text" name="name" style="height:100px; width:300px;">
Daniel dos Santos
quelle