Wie lege ich die Größe eines HTML-Textfelds fest?

Wie lege ich die Größe eines HTML-Textfelds fest?

Benutz einfach:

textarea {
    width: 200px;
}

oder

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

Je nachdem, was Sie unter "Textfeld" verstehen.

Ihr Markup:

<input type="text" class="resizedTextbox" />

Das CSS:

.resizedTextbox {width: 100px; height: 20px}

Beachten Sie, dass die Textfeldgröße ein "Opfer" des W3C-Boxmodells ist . Was ich unter Opfer verstehe, ist, dass die Höhe und Breite eines Textfelds die Summe der oben zugewiesenen Eigenschaften für Höhe / Breite zusätzlich zur Polsterhöhe / -breite und der Randbreite ist. Aus diesem Grund haben Ihre Textfelder in verschiedenen Browsern geringfügig unterschiedliche Größen, abhängig von der Standardauffüllung in verschiedenen Browsern. Obwohl verschiedene Browser dazu neigen, unterschiedliche Auffüllungen für Textfelder zu definieren, enthalten die meisten Reset-Stylesheets keine <input />Tags in ihren Reset-Blättern. Daher sollten Sie dies berücksichtigen.

Sie können dies standardisieren, indem Sie Ihre eigene Polsterung definieren. Hier ist Ihr CSS mit angegebenem Abstand, sodass das Textfeld in allen Browsern gleich aussieht:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

Ich habe 1-Pixel-Padding hinzugefügt, da einige Browser dazu neigen, das Textfeld zu voll zu machen, wenn das Padding 0px beträgt. Abhängig von Ihrem Design möchten Sie möglicherweise noch mehr Polster hinzufügen. Es wird jedoch dringend empfohlen, das Polster selbst zu definieren. Andernfalls überlassen Sie es verschiedenen Browsern, selbst zu entscheiden. Für eine noch größere Konsistenz zwischen den Browsern sollten Sie den Rahmen auch selbst definieren.

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

Ihr Textfeldcode:

<input type="text" class="textboxclass" />

Ihr CSS-Code:

input[type="text"] {
height: 10px;
width: 80px;
}

oder

.textboxclass {
height: 10px;
width: 80px;
}

Also wählen Sie zuerst Ihr Element mit Attributen (siehe erstes Beispiel) oder Klassen (siehe letztes Beispiel) aus. Später weisen Sie Ihrem Element Höhen- und Breitenwerte zu.

Dies funktioniert bei mir in IE 10 und FF 23

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

Wenn Sie die Klassenmethode nicht verwenden möchten, können Sie die Eltern-Kind-Methode verwenden, um Änderungen im Textfeld vorzunehmen.

Zum Beispiel. Ich habe ein Formular in meinem Formular div erstellt.

HTML Quelltext:

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

Jetzt lautet der CSS-Code wie folgt:

.form textarea{
    height: 220px;
    width: 342px; 

Problem gelöst.

Achtung! Das width-Attribut wird durch das max-width-Attribut abgeschnitten. Also habe ich benutzt ....

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

Versuchen:

input[type="text"]{
padding:10px 0;}

Auf diese Weise bleibt es unabhängig davon, welche Textgröße für das Textfeld festgelegt wurde. Sie erhöhen die Höhe stattdessen mit Polsterung

Versuchen Sie diesen Code:

input[type="text"]{
 padding:10px 0;}

Auf diese Weise bleibt es unabhängig davon, welche Textgröße für das Textfeld festgelegt wurde. Sie erhöhen die Höhe stattdessen mit Polsterung.

Elemente können mit den Attributen heightund dimensioniert widthwerden.

Sie können die abhängige Eingabebreite gegenüber der Containerbreite festlegen.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}