Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 15. November 2012

CSS: Scrollleisten in Chrome individuell gestalten

Vom Internet Explorer kann­te man die Möglichkeit bereits, die Scrollleisten des Browsers indi­vi­du­ell anzu­pas­sen. Bereits seit der uralten Version 5.5 ist es mög­lich, die Farbe der Leiste und ihrer Bestandteile zu ändern. Mittlerweile erlau­ben Webkit-Browser (bei­spiels­wei­se Chrome und Safari) eben­falls, die Leisten zu indi­vi­dua­li­sie­ren. Allerdings geht Webkit hier noch einen Schritt wei­ter – nicht nur die Farbe lässt sich ändern.


Beispiele für indi­vi­du­el­le Scrollleisten

Farbe, Breite, Rahmen

Verschiedene Pseudoelemente kön­nen ver­wen­det wer­den, um alle Bestandteile der Scrollleiste ganz indi­vi­du­ell zu gestal­ten. Wie bei nor­ma­len HTML-Elementen auch besteht die Möglichkeit, die Hintergrund- und Vordergrundfarbe sowie den Rahmen anzu­pas­sen. Selbst gepunk­te­te und abge­run­de­te Scrollbar-Tracks sowie Hintergrundgrafiken kön­nen erstellt bzw. imple­men­tiert wer­den.

Folgende Pseudoelemente ste­hen 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öhn­li­che HTML-Elemente kann man die ein­zel­nen Pseudoelemente nun gestal­ten:

::-webkit-scrollbar {
  width: 20px;
  background: yellow;
}
::-webkit-scrollbar-thumb {
  border: 2px dotted green;
  border-radius: 10px;
}

Das Beispiel färbt den gesam­ten Bereich für die Scrollbar gelb ein und setzt ihn auf eine Breite von 20 Pixel. Der Schieberegler wird mit einer grü­nen gepunk­te­ten Linie ver­se­hen und erhält abge­run­de­te Ecken. Zusätzlich kann man mit ent­spre­chen­den Pseudoklassen das Aussehen bei Interaktion mit der Maus ver­än­dern:

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

Nur eine Sache beherr­schen die Pseudoelemente nicht: Es las­sen sich kei­ne CSS3-Transitions anwen­den. Weiche Übergänge zwi­schen den Zuständen („hover“ und „active“) sind – zumin­dest der­zeit – nicht mög­lich. Ansonsten sind der Kreativität kei­ne Grenzen gesetzt. Von dezent bis schil­lernd bunt ist alles mach­bar.

Zusätzliche Pseudoklassen

Wer möch­te, kann mit zusätz­li­chen Pseudoklassen das Aussehen wei­ter indi­vi­dua­li­sie­ren. So gibt es die Klasse „:inac­tive-win­dow“, mit der das Aussehen jedes Pseudoelementes für ein inak­ti­ves Fenster ange­passt wer­den kann. Die bei­den Klassen „:hori­zon­tal“ und „:ver­ti­cal“ erlau­ben die unter­schied­li­che Gestaltung hori­zon­ta­ler und ver­ti­ka­ler Leisten:

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

Fazit: Gerade für mehr­zei­li­ge Formularfelder ist es schön, wenn die­se gestal­te­risch ans Seitenlayout ange­passt wer­den kön­nen. Hier bie­ten die Webkit-Browser mit den Pseudoelementen inter­es­san­te Möglichkeiten.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar

  1. Hallo,

    wie kann man die Leiste wie­der auto­ma­tisch aus­blen­den las­sen… das geht nach­her nicht mehr in Safari auf OS X

Schreibe einen Kommentar zu Remo Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.