CSS, HTML und Javascript mit {stil}

Formulare mit CSS gestalten

Formular mit CSS

Formular-Elemente brauchen einen hohen Wiedererkennungswert. Eine klare Struktur und ein individueller Stil verringern die Abneigung gegen das Ausfüllen von Formularen.

select, input type='checkbox' oder 'radio' lassen sich aber nur widerwillig durch CSS auffrischen – sie erben ihre Stile nicht vom Browser, sondern vom Betriebssystem.

HTML und CSS bieten nur einen geringen Design-Spielraum für Formulare und viele CSS-Eigenschaften zeigen kaum eine Wirkung, denn die Browser ignorieren das CSS, um den Wiedererkennungswert von Formular-Elementen zu erhalten oder weil sie auf Elemente des Betriebssystems zurückgreifen.

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: teal; 
   color: white; 
   width: 180px; 
   font-size: 1.1em; 
}

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.

CSS für input type="text"

Einfache Eingabefelder bieten einen größeren Spielraum für CSS.

border-radius für input type="text" mildert die spitzen Ecken von Eingabefeldern, padding setzt die Eingaben besser ab.

input[type="text"] {
   padding: 2px 16px; 
   height: 30px; 
   font-size: 1.8em;
   border-radius: 18px;
   outline: none // keine blaue Umrandung beim Fokus
}

CSS appearance

appearance ist sozusagen »Kein CSS per Ordre de Mufti«.

appearance unterdrückt die vorgegebenen Stile von Formularfeldern, so dass sie mit CSS entsprechend den Wünschen des Webdesigners dargestellt werden können.

select {
   appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
}

IE unterstützt appearance nicht, aber reagiert auf -webkit-appearance.

Mit appearance:none ist der Spielraum für CSS größer.

CSS Basic User Interface Module Level 4 Editor’s Draft, 15 April 2016

CSS für input type="range"

Auf einem Smartphone oder einem Tablett ist das HTML5 Eingabefeld input type="range" mit seinem kleinen Anfasser wie Angeln nach winzig kleinen Fischen.

Das CSS für input type=range ist ein Drama in drei Akten.

track thumb
input[type=range]:focus {
  outline: none;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}

Das gilt für alle drei Akteure: outline:none verhindert die Anzeige des blauen Rahmens, wenn der Slider in den Fokus kommt.

Der Track muss für jede Browserart gesondert notiert werden.

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background-color: silver;
  border-radius: 5px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background-color: silver;
  border-radius: 5px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

Auch beim Thumb, dem Anfasser des Schiebereglers, sind die Unterschiede im gering, aber auch sie lassen sich nur über den jeweiligen Browser-Präfix erreichen.

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 8px solid gray;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  margin-top: -14px;
}

input[type=range]::-moz-range-thumb {
  border:8px solid gray;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  margin-top: -14px;
}

input[type=range]::-ms-thumb {
  border: 8px solid silver;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
}

Am Ende braucht Internet Explorer die Farben für den linken (unteren) und rechten (oberen) Teil des Tracks.

input[type=range]::-ms-fill-lower {
  background-color: gray;
  border-radius: 5px;
}
input[type=range]::-ms-fill-upper {
  background-color: silver;
  border-radius: 5px;
}

Unterstützt von Safari, Chrome, Firefox, Opera. IE unterstützt CSS appearance mit webkit-Präfix.

Der doppelte Doppelpunkt vor dem Selektor muss sein: Hier haben wir Pseudo-Elemente.

  • Die Webkit-Browser sprechen den Track mit ::-webkit-slider-runnable-track an, den Thumb mit ::webkit-slider-thumb.
  • Mozilla-Browser sprechen den Track mit ::-moz-range-track an, den Thumb mit ::-moz-range-thumb

Wenn der Thumb größer ist als der Track, beschneidet IE den Thumb auf die Höhe des Tracks. Als Workaround kann man border (transparent oder Hintergrundfarbe) für den Track setzen.

Um zu verhindern, dass Internet Explorer / Egde den aktuellen Wert des Sliders beim Schieben anzeigt:

input[type=range]::-ms-tooltip {
    display: none;
}

progress – Fortschrittsbalken

Ein Fortschrittsbalken ist ein wichtiges Moment der Benutzerfreundlichkeit bei umfangreichen Aufgaben und Formularen. Das HTML progress-Tag setzt einen einfachen Fortschrittsbalken.

Die Browser zeigen das progress-Element als relativ dünnen blauen Balken. Unter Windows ist der Fortschritt zart animiert, unter Mac OS springt der der Fortschritt von Punkt zu Punkt.

Das ist einmal mehr ein Fall für CSS appearance. Mit appearance none rollen die Browser den puren Stil heraus: einen dunkelgrauen Hintergrund und einen grünen Balken oder hellgrau mit blauem Balken. Und dann kocht jeder Browser sein eigenes Süppchen.

progress {
	appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	border: none;
	background-size: auto;
	width: 300px;
	height: 30px;
	display: block;
	border-radius: 15px;
	color: rosybrown; /** IE 10 **/
	background-color: #efefef;
}

progress::-moz-progress-bar { 
	background-color: rosybrown;
	border-radius: 15px;
}

progress::-webkit-progress-bar {
    background-color: #efefef;
    border-radius: 15px;
}

progress::-webkit-progress-value {
    background-color: rosybrown;
    border-radius: 15px;
}

progress besteht aus zwei Elementen:

  • progress-bar (der Hintergrund)
    progress::-moz-progress-bar
    progress::-webkit-progress-bar
  • progress-value (der Zeiger, der sich verändert)
    progress::-webkit-progress-value

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

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: inline-block; width: 6em; }

display: inline-block; verwandelt das inline-Element label in ein Block-Element, das aber keinen Zeilenumbruch mitbringt. So kann dem label-Tag eine Breite zugewiesen werden und überlange Inhalte werden innerhalb der Breite des label-Elements umgebrochen.

Formular mit CSS
Rot Blau Gelb

label kann das Formular in Spalten aufgebauen wie einst Tabellen – nur ohne den Aufwand, den Tabellen für die Platzierung von Eingabefeldern erzeugen.

Das Schöne an der Layout von Formularen mit label: Wenn das Formular nicht mehr in Spalten dargestellt werden soll, wandelt die CSS-Eigenschaft display: block das label-Tag in ein Blockelement mit Zeilenumbruch um, das über dem jeweiligen Eingabefeld steht.

Schrift für Formulare

input, textarea { font: 0.86em/120% Tahoma, Arial, sans-serif; color: navy; }

Firefox und Internet Explorer 7 machen einen Unterschied zwischen Textfeldern und Eingabefeldern. textarea benutzt einen Monospace-Font, input wird mit einer Proportionalschrift angezeigt. So zeigen input und textarea unterschiedliche Schriftgrößen.

Außderdem übernimmt input die Schriftdeklaration aus body, während textarea beim Monospace-Font bleibt. Wenn eine CSS-Regel sowohl für die Schrift von input als auch von textarea definiert wird, zeigen die Felder dieselbe Größe und Schrift.