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 soll das mitgebrachte CSS außer Gefecht setzten und dem Designer die volle Kontrolle geben.
So ungefährt hatte sich das CSS3 User Interface appearance schon 2004 vorgestellt, die Spezifikation wurde aber nie umgesetzt. Stattdessen sitzen wir auf einem Browser-Präfix-Chaos.
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: 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;
}
Range-Slider vertikal
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[type=range][orient=vertical] {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}
Für Chrome steht -webkit-appearance: slider-vertical, für IE writing-mode: bt-lr, für Firefox das Range-Attribut orient="vertical".
<input class="vert" min="5" max="50" step="5" orient="vertical">
Quelle: How to display a range input slider vertically auf Stackoverflow
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 {
-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.