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

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