Formulare mit CSS gestalten und vereinfachen

CSS für Formulare: input type range und progress

Eingabefelder in Formularen 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 nur widerwillig durch CSS auffrischen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

appearance

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.

Die CSS-Eigenschaft appearance sollte ursprünglich die Darstellung von Formularfeldern steuern, appearance: none das mitgebrachte CSS außer Gefecht setzen und dem Designer die volle Kontrolle geben. So ungefährt hatte sich das CSS User Interface appearance schon 2004 vorgestellt, die Spezifikation wurde aber nicht durchgängig umgesetzt, so dass wir lange auf wir auf einem planlosen Browser-Präfix-Chaos saßen. Der Abgang von IE11 macht's uns etwas einfacher.

appearance ist sozusagen »Kein CSS per Ordre de Mufti« und unterdrückt die vorgegebenen Stile von Formularfeldern, so dass sie mit CSS den Wünschen des Webdesigners besser entgegen kommen.

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

Mit appearance:none ist der Spielraum für CSS größer. Empfehlenswert ist appearance allerdings nicht, solange es noch mit einem Browser-Präfix daherkommt, denn die Browser reagieren unterschiedlich.

CSS accent-color

Formulare mit CSS sind auch nach dem Auftritt von appearance: none ein Wespennest: Entweder alles so lassen wie es ist oder alle Formularelemente von Grund auf aufbauen (ein Loch ohne Boden).

Jetzt kommt accent-color ins Spiel: Nur eine Zeile CSS färbt die schwierigen Kandidaten:

  • input type="range"
  • input type="radio"
  • input type="checkbox"
  • HTML progress

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.

range slider thumb and track
Track und Thumb
input[type=range]:focus {
  outline: none;
}

input[type=range] {
	appearance: none;
	width: 100%;
	border-radius: 6px;
	height: 12px;
	border: 1px solid blue;
	background-color: cornflowerblue; 
}

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

Der Thumb (Knopf) muss für -webkit und -moz gesondert notiert werden (der doppelte Doppelpunkt vor dem Selektor: Hier haben wir Pseudo-Elemente.).

input[type='range']::-webkit-slider-thumb {
	appearance: none;
	background-color: cornflowerblue;
	border: 2px solid blue;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  background: orange;
  border: 2px solid firebrick;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  cursor: pointer;
}

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

Unterstützt von Edge, Safari, Chrome, Firefox, Opera.

progress – Fortschrittsbalken

Ein Fortschrittsbalken ist ein wichtiges Moment der Benutzerfreundlichkeit bei umfangreichen Aufgaben und Formularen. HTML progress setzt uns einen ausgesprochen einfachen Fortschrittsbalken vor.

Die Browser zeigen progress 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 {
   -moz-appearance: none;
   -webkit-appearance: none;
   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

Range-Slider vertikal: orient="vertical"

Eigentlich müsste nur die Höhe des Range-Sliders größer sein als seine Breite, dann sollte der Browser die Orientierung aus dem Seitenverhältnis erkennen. So weit ist es aber noch nicht.

<input class="vert" min="5" max="50" step="5" orient="vertical">

Auf orient="vertical" folgt nicht jeder Browser. Also lieber noch eine Zeile CSS: -webkit-appearance: slider-vertical;

input[type=range][orient=vertical] {
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

Für Chrome, EDGE, Safari steht -webkit-appearance: slider-vertical, für Firefox reicht das Range-Attribut orient="vertical".

input range vertically
Diversität en detail

Quelle: How to display a range input slider vertically auf Stackoverflow

Range Slider für IE

Unterstützt tatsächlich noch jemand den antiken IE11? IE unterstützt CSS appearance mit webkit-Präfix.

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

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

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;
}

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

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

Und für den vertikalen Range-Schieber in IE

writing-mode: bt-lr; /* IE */