Tutorials > CSS > Tutorial-Detail: Farbige Scrollbalken mit CSS

Farbige Scrollbalken mit CSS

So ist es ganz einfach, farbige Scrollbalken mit CSS zu erstellen.

Das Body-Tag hat Attribute, mit denen sich die Scrollbars einfärben lassen. Leider werden farbige Scrollbalken jedoch nur vom Internet Explorer ab Version 5.5 unterstützt.

Um den ganzen Scrollbalken einzufärben, gibt es das scroll-base-color Attribut. Hier mal ein kleines Beispiel:

Code:

<html>
<head>
<style type="text/css">
body {
scrollbar-base-color: red;
}
</style>
</head>
<body>
Hier kommt der Seiteninhalt
</body>
</html>

Hiermit würde also die gesamte Scrollbar rot eingefärbt werden.

Es gibt noch folgende Attribute, um Scrollbars ein anderes Aussehen zu geben:

scrollbar-face-color bestimmt die Farbe des Scrollbalkens
scrollbar-highlight-color bestimmt die Farbe der höhergelegenen Elemente.
scrollbar-shadow-color bestimmt die Farbe der tiefergelegenen Elemente.
scrollbar-3dlight-color bestimmt die Farbe seitlich liegender Elemente.
scrollbar-arrow-color bestimmt die Farbe der Pfeile
scrollbar-track-color bestimmt die Farbe der Scrollbalken Schiene
scrollbar-darkshadow-color bestimmt die Farbe von liegenden Elementen.

Und zum Schluss noch ein Beispiel:

Code:

<html>
<head>
<style type="text/css">
body {
scrollbar-face-color: blue;
scrollbar-highlight-color: black;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: white;
scrollbar-track-color: white;
scrollbar-darkshadow-color: black;
scrollbar-base-color: black;
}
</style>
</head>
<body>
Hier ist der Inhalt
</body>
</html>

Weiterführende Links:
Mehr zu Css

Geschrieben von Christian am 12.04.2005 (5796x gelesen)

weiterempfehlen

Druckversion

kommentieren

Dumm nur, dass das W3C das als Fehler ansieht!

Geschrieben von Area51