CSS für Formulare • mediaevent.de

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

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

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, HTML und Javascript mit {stil}

Formulare mit CSS gestalten

CSS für input type="range"

progress – Fortschrittsbalken

CSS appearance