CSS: Scrollleisten in Chrome individuell gestalten

Vom Internet Explorer kannte man die Möglichkeit bereits, die Scrollleisten des Browsers individuell anzupassen. Bereits seit der uralten Version 5.5 ist es möglich, die Farbe der Leiste und ihrer Bestandteile zu ändern. Mittlerweile erlauben Webkit-Browser (beispielsweise Chrome und Safari) ebenfalls, die Leisten zu individualisieren. Allerdings geht Webkit hier noch einen Schritt weiter – nicht nur die Farbe lässt sich ändern.

Beispiele für individuelle Scrollleisten

Farbe, Breite, Rahmen

Verschiedene Pseudoelemente können verwendet werden, um alle Bestandteile der Scrollleiste ganz individuell zu gestalten. Wie bei normalen HTML-Elementen auch besteht die Möglichkeit, die Hintergrund- und Vordergrundfarbe sowie den Rahmen anzupassen. Selbst gepunktete und abgerundete Scrollbar-Tracks sowie Hintergrundgrafiken können erstellt bzw. implementiert werden.

Folgende Pseudoelemente stehen zum Anpassen zur Verfügung:

::-webkit-scrollbar { } /* gesamte Scrolleiste */
::-webkit-scrollbar-button { } /* Pfeil-Buttons */
::-webkit-scrollbar-track { } /* Bereich für den Schieberegler */
::-webkit-scrollbar-thumb { } /* Schieberegler */
::-webkit-scrollbar-corner { } /* Größenregler (bei TEXTAREA sichtbar) */

Wie gewöhnliche HTML-Elemente kann man die einzelnen Pseudoelemente nun gestalten:

::-webkit-scrollbar {
  width: 20px;
  background: yellow;
}

::-webkit-scrollbar-thumb {
  border: 2px dotted green;
  border-radius: 10px;
}

Das Beispiel färbt den gesamten Bereich für die Scrollbar gelb ein und setzt ihn auf eine Breite von 20 Pixel. Der Schieberegler wird mit einer grünen gepunkteten Linie versehen und erhält abgerundete Ecken. Zusätzlich kann man mit entsprechenden Pseudoklassen das Aussehen bei Interaktion mit der Maus verändern:

::-webkit-scrollbar-thumb:hover {
  background: red;
}

::-webkit-scrollbar-thumb:active {
  background: blue;
}

Nur eine Sache beherrschen die Pseudoelemente nicht: Es lassen sich keine CSS3-Transitions anwenden. Weiche Übergänge zwischen den Zuständen („hover“ und „active“) sind – zumindest derzeit – nicht möglich. Ansonsten sind der Kreativität keine Grenzen gesetzt. Von dezent bis schillernd bunt ist alles machbar.

Zusätzliche Pseudoklassen

Wer möchte, kann mit zusätzlichen Pseudoklassen das Aussehen weiter individualisieren. So gibt es die Klasse „:inactive-window“, mit der das Aussehen jedes Pseudoelementes für ein inaktives Fenster angepasst werden kann. Die beiden Klassen „:horizontal“ und „:vertical“ erlauben die unterschiedliche Gestaltung horizontaler und vertikaler Leisten:

::-webkit-scrollbar-thumb:horizontal {
  height: 12px;
}

Fazit: Gerade für mehrzeilige Formularfelder ist es schön, wenn diese gestalterisch ans Seitenlayout angepasst werden können. Hier bieten die Webkit-Browser mit den Pseudoelementen interessante Möglichkeiten.

(dpe)