CSS, HTML und Javascript mit {stil}

Formulare mit CSS gestalten

Formular mit CSS: input, textarea

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

Nicht zuletzt in Hinsicht auf das Erscheinungsbild und die barrierefreie Eingaben auf mobilen Geräten kommen Formulare mit etwas CSS dem Benutzer heute besser entgegen.

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. Allerdings wird der Button das dunkelmausgrau.

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

Geht nur mit Browserpräfix.

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

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" name="email" placeholder="Email"></label>
<label><input type="search" name="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