Formularfelder ohne CSS: eckig, kantig und in Stein gemeißelt
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 zicken.
Formularelemente ohne CSS in diesem Browser:
Formularelemente haben seit den Anfängen des WWW ihr natürliches Erscheinungsbild nicht geändert. Ohne CSS rendern die Browser den Text mit 11px, Checkboxen und Radiobuttons sind gerade mal 12 x 12px.
Responsive Formulare brauchen viel Aufmerksamkeit und epische CSS-Regeln. Erst appearance:none für Suche, Checkboxen und Radiobuttons, Select-Auswahlen und type=range bringt Abhilfe und befreit diese Elemente von ihrem antiquarischen Design.
Schrift für Formulare
Die Browser übernehmen für Eingabefelder input und textarea nicht ohne weitere Angaben die Schriftfamilie: Formular-Elemente erben die Schrift – font-family – nicht automatisch vom body-Element. Die Browser setzen die Schrift des Betriebssystems ein, also meist eine serifenfreie Schrift wie Arial oder Helvetica.
Schnelle Abhilfe schafft CSS inherit für font-size und font-family – Erben vom body-Element.
input, select, textarea, button {
font-size: inherit;
font-family: inherit;
}
Erst wenn font-family und u.U. font-weight und font-size für input, select, button und textarea definiert wird, zeigen input-Felder dieselbe Schrift und Schriftgröße. Vielleicht.
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 dem Benutzer deutlich vor Augen geführt wird, dass er sein Eingabefeld tatsächlich erreicht hat.
input type="color"
Bei Farbangaben erwarten die Browser eine Hex-Eingabe mit einem führenden "#" und spendieren ein winziges Feld. Die kleinen Felder für den Farbwähler vergrößern und in Form bringen? Einfach. Nur ein paar winzig kleine Anpassungen.
input[type="color"] {
padding: 0; /** für firefox **/
width: 64px;
height: 64px;
cursor: pointer;
}
::-moz-color-swatch {
border-color: red;
}
/** Webkit-Browser **/
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
CSS für placeholder
Das placeholder-Attribut gibt wertvolle Tipps zum Ausfüllen und sollte in keinem Feld fehlen. In CSS wird placeholder als Pseudoklasse angesprochen.
::placeholder {
color:navy;
opacity:1;
transition: opacity 1s;
}
:focus::placeholder { opacity:0 }
Für viele Benutzer ist es immer noch befremdlich, dass der Hinweistext nicht sofort verborgen wird, wenn das Feld aktiviert wird.
Mit CSS wird die Textfarbe für placeholder transparent. Ob der Placeholder tatsächlich weich und sanft verschwindet, sei dahingestellt: Das scheint nur bei Safari und Chrome zu funktionieren.
:placeholder-shown
Als Sahnehäubchen kommt noch :placeholder-shown zum Eingabefeld, das nicht auf den Platzhalter selber, sondern auf das Eingabefeld wirkt.
:placeholder-shown {
border:2px solid red;
}
Der Rahmen verschwindet, sobald der Benutzer das erste Zeichen schreibt. Nicht schlecht … eine weitere kleine Hilfestellung beim Ausfüllen von Formularen, muss aber gut getestet werden.
Aufpassen! ::placeholder spricht den Platzhaltertext an, :placeholder-shown Eingabefelder, die einen Platzhaltertext haben. Dabei ist ::placeholder ein Pseudo-Element (sichtbar, aber nicht Teil des Document Object Model). :placeholder-shown ist eine Pseudoklasse (einfacher Doppelpunkt) und steht für ein Element in einem bestimmten Zustand.
Mehr zu Pseudo-Klassen und Pseudo-Elementen wie ::before und ::after.
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.
Für die vergrößerten Check- und Radioboxen reichen ebenfalls CSS und zwei einfache Bilder: Checkbox und Radiobutton mit CSS.
textarea background-image
CSS kann einer textarea Hintergrundbild zuweisen, die Schrift für das Textfeld ändern und einen border-radius einsetzen.
textarea {
background:url(logo.png) bottom right no-repeat;
background-size: contain;
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 auf font-size und auf color und die kleine Icons sind Emojis, die ebenfalls auf font-size reagieren.
<option style="color:plum"> 🍬 Pfefferminz </option>
