 Scrollbars farbig anpassen (nicht NS 4.x und FF)
Die Scrollbars (deutsch: Bildlaufleisten) Ihrer Seite können Sie für einige Browser farblich anpassen. Dazu werden CSS-Angaben für HTML und BODY notiert.
|
|
Scrollbalken formatieren mit CSS
Der FF ignoriert solche Anweisungen zur Zeit (V5.3) noch.
Gebräuchliche Bezeichnungen: Scrollbalken, Scrollbar, Bildlaufleiste, Rollbalken
Die Farben für die Bildlaufleiste (Scrollbar) kann man Für den IE, Opera, Konqueror und ab NC6 mit CSS-Anweisungen festlegen. Der FF, auch in der 5er-Version und NS4 ignorieren diese Anweisungen generieren aber keinen (sichtbaren) Fehler.
Die einzelnen Bereiche für die Farbangaben sehen Sie in der Grafik rechts.
Die Grafik können Sie für den pers. Gebrauch herunterladen. Zum Download / Ausdruck der Referenzseite meines Beispiels als PDF, klicken Sie den Link an (öffnet in einem neuen Fenster).
 Referenz als PDF (280 kB)
| |
|
Im Head-Bereich:
Die Formatierungsanweisungen für den Scrollbalken werden üblicherweise im CSS-Anweisungsblock für den Selektor 'body' notiert.
Der Internet Explorer 6 interpretiert die Angaben standardkonformen Modus aber nur dann, wenn Sie diese für html anstatt body definieren. Um auf der sicheren Seite zu sein, tragen Sie die Formatangaben für die Scrollbars für 'html' und zusätzlich auch für 'body' ein.
<style type="text/css">
<!--
html, body {
/* scrollbar */
scrollbar-face-color: #FF8450;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #666699;
scrollbar-3dlight-color: #FBF5C3;
scrollbar-darkshadow-color: #7F7F7F;
scrollbar-track-color: #FFD2C3;
scrollbar-arrow-color: #FFFFFF;
}
-->
</style>
Für den Rest des Body-Bereich können natürlich weitere CSS-Angaben gemacht werden:
<style type="text/css">
<!--
body {
...
font-family: Verdana,Arial,sans-serif;
font-size:12px;
color: #000000;
background-color:#FFFFFF;
}
-->
</style>
Zwischendurch: Bitte beachten Sie, dass die CSS-Angabe für background-color höherrangig ist als die Angaben bgcolor="#xxxxxx" im Body-Tag.
Scrollbarfarbe einfach und schnell
Für einen schnellen Test können Sie probeweise lediglich die base-color angeben:
<style type="text/css">
<!--
body {scrollbar-base-color: #E1E3F8;}
-->
</style>
 Wählen Sie als Farbwert dazu die dominante Farbe ihrer Seite.
Abstufungen werden vom Browser berechnet.
Für das Formularelement 'textarea'
Eine 'textarea' ist ein mehrzeiliges Eingabefeld innerhalb von Formularen. Für dieses Formular-Elemet 'textarea' können Sie die Farben der Scroll-Leisten ebenfalls definieren. Die können identisch oder abweichend von den Scroll-Leisten der Seite festgelegt werden.
<style type="text/css">
<!--
body, textarea {
/* für identische Farben */
scrollbar-face-color: #FF8450;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #666699;
scrollbar-3dlight-color: #FBF5C3;
scrollbar-darkshadow-color: #7F7F7F;
scrollbar-track-color: #FFD2C3;
scrollbar-arrow-color: #FFFFFF;
background-color:#FCFED6;
padding:8px;
}
-->
</style>
<style type="text/css">
<!--
textarea {
/* für scrollbars der textarea */
scrollbar-face-color: #FF8450;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #666699;
scrollbar-3dlight-color: #FBF5C3;
scrollbar-darkshadow-color: #7F7F7F;
scrollbar-track-color: #FFD2C3;
scrollbar-arrow-color: #FFFFFF;
background-color:#FCFED6;
padding:8px;
}
-->
</style>
Padding-Angaben führen in einigen Versionen des FF zur Einrückung des Scrollbalkens!
Unten zur Demo eine Formatierung mit unvollständigen Angaben. Lediglich 2 Farben wurden festgelegt!
<textarea style="scrollbar-face-color:#85D487;scrollbar-track-color:#CFF0CE;" ..
 die Seite 'springt' in der Horizontalen - Scrollbars erzwingen / unterdrücken
Tabellen mit Scrollbars
zur Verfügung stehende Fenstergröße berechnen
Grafik strecken fensterfüllend anzeigen
|
Home • CSS • farbiger Scrollbalken
Demo