Formulare mit CSS gestalten und vereinfachen

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.

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

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

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 */

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

CSS appearance

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

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

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

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.