Formulare mit CSS gestalten

Formular mit CSS stylen: Stile und Schrift für input, textarea

Mithilfe von label-Tags und CSS lassen sich Formulare übersichtlich und barrierefrei gestalten, werden responsiv, damit sie auch auf kleinen Monitoren gut zu bedienen sind. Das placeholder-Attribut im Eingabefeld gibt Tipps zum Ausfüllen.

Von den grauen öden Formularen aus der Urzeit des Webs bis hin zu den übersichtlich gestylten Formularen der Gegenwart war ein steiniger Weg.

Erscheinungsbild und barrierefreie Eingaben bei Formularen kommen dem Benutzer heute besser entgegen, auch wenn die Browser bei Formularfeldern immer noch zickig sind.

Schrift für Formulare

Die Browser übernehmen für Eingabefelder input und textarea nicht ohne weitere Angaben die Schriftfamilie: Formular-Elemente erben nicht automatisch die Schrift – font-family – vom body-Element. Die Browser setzen die Schrift des Betriebssystems ein, also meist eine serifenfreie Schrift wie Arial oder Helvetica.

.demoform input[type="text"],
.demoform input[type="email"],
.demoform input[type="search"],
.demoform textarea { 
   font-size: 1.2em; 
   border: 1px solid gainsboro;
   color: teal;
   font-family: inherit;
   font-weight:300; 
}	

Erst wenn font-family und u.U. font-weight sowohl für font-family, font-weight und font-size für input als auch für textarea definiert wird, zeigen input-Felder dieselbe Schrift und Schriftgröße.

Bei input type=submit bleiben Safari und Chrome hartnäckig bei ihrer eigenen Typo, nur color zeigt eine Wirkung. Setzt man allerdings border oder border-radius für den Submit-Button ein, klappt es auch mit der Schriftgröße. Damit der Button nicht flach und mausgrau wird, bekommt er einen Verlauf als background-image.

input[type="submit"] {
   font-size: 1.3em; padding: 5px 12px; 
   font-family: Roboto, sans-serif;
   font-weight: 300;
   color: teal;
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 20px;
}

CSS input type = "text", type = "email", …

Einfache Eingabefelder bieten einen größeren Spielraum für CSS. border-radius und background-color funktionieren wie erwartet.

.demoform input[type="text"],
.demoform input[type="email"],
.demoform input[type="search"],
.demoform textarea { 
  width: 100%; min-width: 100%; 
  box-sizing: border-box;
  padding: 4px;
  outline: none;
}

Bei type="search" hat Safari eigene strikte Vorstellungen bzgl. border-color und border-radius und behält sich die Kontrolle über die Schrift vor und ignoriert padding, font-family, border, background und line-height. Aber mit einem zusätzlichen Attribut results zeigt Safari eine Lupe und rückt ein kleines x zum Löschen der Eingaben heraus.

outline: none verhindert den blauen Rahmen rund um ein fokussiertes Eingabefeld. Ob das allerdings tatsächlich angebracht ist? Bei den trendigen zarten Rahmen – border – tut es eigentlich gut, wenn der Benutzer eine deutlich merkt, dass er sein Eingabefeld tatsächlich erreicht hat.

CSS für Placeholder

Das placeholder-Attribut gibt wertvolle Tipps zum Ausfüllen und sollte in keinem Feld fehlen. Wenn es sich mit CSS an die Gestaltung der Seite anlehnen soll, geht das nur mit Browserpräfix.

::-webkit-input-placeholder { color: hsl(5,50%,80%); }
::-moz-placeholder { color: hsl(5,50%,80%); font-weight:300; }

Für viele Benutzer ist es immer noch befremdlich, dass der Hinweistext nicht sofort verborgen wird, wenn das Feld aktiviert wird.

Früher hat ein kleines Javascript den Text verborgen – onfocus und onblur sind valide Attribute von input-Tags.

<label>
    <input type="text" 
        name="vorname" 
        placeholder="Vorname" 
        onfocus="this.placeholder = ''" 
        onblur="this.placeholder = 'Vorname'">
</label>

Mit CSS wird die Textfarbe für placeholder einfach transparent. Ob der Placeholder tatsächlich weich und sanft verschwindet, sei dahingestellt: Das scheint nur bei Safari und Chrome zu funktionieren.

.slowfade input::-webkit-input-placeholder { color:navy; transition: color 1s; }
.slowfade input::-moz-placeholder { color:navy; transition: color 1s }
.slowfade input:-ms-placeholder { color:navy; transition: color 1s}

.slowfade input:focus::-webkit-input-placeholder { color:transparent; }
.slowfade input:focus::-moz-placeholder { color:transparent; }
.slowfade input:focus:-ms-placeholder { color:transparent; }

CSS für label

HTML label wendet sich nicht nur an Screenreader: Mit minimalem CSS für das label-Tag lassen sich Formulare klar strukturieren und der Hot Spot – der sensible Bereich für die Maus oder den Finger – vergrößern.

<label><input type="email" placeholder="Email"></label>
<label><input type="search" placeholder="Suchen" results></label>
<div class="flex">
   <label><input type="checkbox" name="color" value="Rosa"> Rosa</label>
   <label><input type="checkbox" name="color" value="Lavendel"> Lavendel</label>
   <label><input type="checkbox" name="color" value="Zitrone"> Zitrone</label>
</div>

label muss nicht unbedingt mit einem Text vor dem input-Tag stehen, sondern kann das Eingabefeld einwickeln und die maus- bzw. touch-sensible Fläche vergrößern. HTML label ersetzt auch die kleinen Checkboxen und Radio-Buttons ohne Javascript.

Das alleine macht die kleinen Buttons schon handlicher, aber dieses Verhalten kann man sich für eine größere Ausgabe von Checkboxen und Radio-Buttons zu Nutzen machen.

Klar strukturierte Eingabefelder verringern die Abneigung gegen das Ausfüllen der Eingabefelder. Anstelle von Tabellen oder div-Tags formatiert das label-Tag die Platzierung von Formularfeldern und ihrer Beschriftung.

label {display: block; padding: 1ex; }
.flex label { cursor: pointer }

display:block; verwandelt das inline-Element label in ein Block-Element mit Zeilenumbruch, padding vergrößert die Klickfläche, bei den Checkboxen zeigt der Cursor, dass man nicht auf das winzige Kästchen zielen muss.

textarea background-image

CSS kann einer textarea Hintergrundbild zuweisen, die Schrift für das Textfeld ändern und einen border-radius einsetzen.

textarea {
   background:url(textarea-background-image.png) top right no-repeat; 
   background-size: 100%;
   border-radius:6px; 
   border:2px solid silver;
   outline: none; 
}

Die alten HTML-Attribute cols und rows verschwinden aus textarea und werden durch CSS width und height ersetzt. So passt sich ein textarea-Feld an das Platzangebot eines responsiven Designs an.

CSS für select-Elemente

Größere Schriften sind ein großer Schritt für Formulare. font-size, border, color, padding und background-color sind die einfachsten Maßnahmen.

optgroup {
   background-color: pink;
}

select {
   background-color: seashell; 
   width: 180px; 
   font-size: 1.1em; 
   font-family: inherit;
   font-weight: 300;
}

option reagiert zwar auf font-size, aber nicht auf color – es sei denn, das select-Feld zeigt mehr als eine Option durch das multiple-Attribut. Ein optgroup als Container für die option-Tags gibt dem Drop-Down-Hintergrund eine eigene Farbe – unter Windows, nicht unter Mac OS.

Formular mit CSS text suchen Login CSS