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 vom Browser 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 machts uns etwas einfacher.

appearance: none 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;
	background-image: url('chevron-up-down.svg');
	background-repeat: no-repeat;
	background-position: right;
}

Mit appearance:none ist der Spielraum für CSS größer. Hier verliert das select-Element allerdings seine Rauf/Runter-Pfeile, die den Benutzer darauf aufmerksam machen, dass er das Feld aufklappen kann. Dafür steht hier CSS background-image.

In den immergrünen Browsern ist kein Präfix mehr nötig, aber um auch ältere Browser mitzuziehen, kann der -webkit- bzw. -moz-Präfix weiterhein eingesetzt werden.

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 {
	accent-color: orange;
}

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 weiterhin 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 var(--me-highlight);
  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 {
   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

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