Scrollbalken im Internet Explorer gestalten

In einem anderen Artikel zeigte ich dir bereits, wie du die Scrollbalken in Browsern mit Webkit Engine anpassen kannst. Du kannst aber auch ganz ähnlich auch die Scrollbalken im Internet Explorer gestalten. Dazu ist ebenfalls nur ein wenig CSS vonnöten.

Wie du die Scrollbalken im Internet Explorer gestalten kannst, zeige ich dir dabei in diesem Artikel.

 

Mit CSS die Scrollbalken im Internet Explorer gestalten

Mit dem nachstehenden CSS Snippet kannst du dabei die Scrollbalken im Internet Explorer gestalten. Kopiere dazu einfach den CSS Code in dein Stylesheet. Anschließend musst du nur noch die Farben nach deinen Wünschen anpassen.

 

Beispiel:

<style type="text/css">
 body {
 scrollbar-base-color : #FARBWERT;
 scrollbar-track-color : #FARBWERT;
 scrollbar-highlight-color : #FARBWERT;
 scrollbar-3d-light-color : #FARBWERT;
 scrollbar-dark-shadow-color : #FARBWERT;
 scrollbar-shadow-color : #FARBWERT;
 scrollbar-arrow-color : #FARBWERT;
 }
</style>

 

Erklärung:

Du musst, wie eben schon geschrieben, nur die Farben nach deinen Wünschen anpassen. Schon kannst du die Scrollbalken im IE einfärben.

Die dabei im Beispiel benutzten CSS Klassen haben folgende Bedeutung.

scrollbar-base-color – Dies ist die Grundfarbe des Scrollbalkens.
scrollbar-track-color – Hiermit definierst du die Farbe des Reglers.
scrollbar-3d-light-color – Hervorhebung des 3D Effekts an den Pfeilen.
scrollbar-highlight-color – Hiermit legst du die Farbe des Reglers bei Aktivierung fest.
scrollbar-dark-shadow-color – Der dunkle Schatten des Reglers.
scrollbar-arrow-color – Damit bestimmst du die Farbe der beiden Pfeile (oben / unten).
scrollbar-shadow-color – Die Farbe des Schattens.

 

Hinweis:

Die in diesem Script genannten Pseudoklassen funktionieren dabei nur mit dem IE. Alle anderen Browser ignorieren dahingegen diese Angaben. Dazu zählt ebenfalls der mit Windows 10 eingeführte Nachfolger vom IE: Edge.

Ebenso solltest du dir überlegen, ob ein Färben der Scrollbalken wirklich nötig ist. Je nachdem, wie du dabei vorgehst, kannst du die „user experience“ massiv verschlechtern.

Darüber hinaus kann, sobald du diese CSS Angaben nutzt, der W3C CSS Validation Service dein Stylesheet nicht mehr validieren.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.