Formularfelder Rand bzw. Rahmen mit CSS anpassen

Für HTML- bzw. Webformulare verwendet man standardmäßig verschiedene HTML-Formularfelder, wie input, textareas. Diese werden von den verschiedenen Browsern standardmäßig mit einen kleinen Rahmen abgebildet, sofern man nicht eine CSS-Bibliothek eingebunden hat, die diese Formatierungen bereits übernimmt.

HTML-Formularfeld Rahmenbreite anpassen

Möchte man diesen Rahmen verändern, kann man sich der passenden CSS-Anweisung bedienen. Dazu fügt man zwischen den head-Tags und den style-Tags der HTML-Datei folgenden CSS-Code ein:

input, textarea {
    border-width:5px;
}

Dieser bewirkt, dass nun um die Eingabefelder ein Rahmen von 5px Breite dargestellt wird. Auch die Darstellung von abgerundeten Ecken ist möglich. Man kann diese Einstellung aber auch direkt an den input– und textarea-Tags vornehmen im HMTL-Code. Während die oben beschriebene Vorgehensweise für alle Formularfelder in der jeweiligen HTML-Datei gilt, kann man mit der folgenden Vorgehensweise für jedes Formularfeld individuell die Rahmenbreite festlegen.

<input name="Name" style="border-width:5px;" />
<textarea name="Bemerkung" style="border-width:5px;"></textarea>

Oder man baut sich eine kleine CSS-Klasse, welche die Rahmenbreite definiert und weist dann dem jeweiligen Formularfeld die Klasse zu. Im Code sieht das dann so aus:

.myborders {
    border-width:5px;
}
<input class="myborders" name="Name" />
<textarea class="myborders" name="Bemerkung"></textarea>

In den folgenden beiden Bildern sieht man einmal einen Vergleich eines Eingabefelds mit Rahmen und einmal ohne Rand. Hätte man in diesem Fall noch weißen Hintergrund gewählt, wäre das Input-Feld im Browser gar nicht direkt ersichtlich.

Formularfeld mit Rahmen

Formularfeld ohne Rahmen

Anstelle der Eigenschaft border-width kann man auch border verwenden. border-width bezieht sich direkt auf die Breite, während die Eigenschaft border etwas allgemeiner ist. Hinter border kann man noch weitere Eigenschaften festlegen, wie z.B., ob der Rahmen gestrichelt oder gepunktet sein soll.

HTML-Formularfeld Rahmenbreite entfernen

Möchte man den Rand oder Rahmen gänzlich entfernen von den Formularfeldern; nun ja; dann ist es ganz simple. Man verwendet den oben genannten Code und setzt die Eigenschaft border-width:0 oder schmeißt diese CSS-Eigenschaft direkt raus.

Rahmenbreite von Formularfeldern mit Editoren ändern

Will man sich nicht mit HTML und CSS herum schlagen, kann einen entsprechenden Editor, wie den DA-FormMaker verwenden, um die Rahmenbreite anzupassen.

Rahmenbreite der Formularfelder konfigurieren

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert