Link zu www.kneller-gifs.de

CSS: Scrollbars farbig darstellen

Ist eine HTML-Seite größer als das Browserfenster, dann werden Scroll-Leisten dargestellt. Bei dem Browser "InternetExplorer" ab der Version 5.5 können die Farben per CSS (Cascade Style Sheets) beeinflußt werden.

Dazu gibt es zwei Möglichkeiten: Entweder man bindet den notwendigen Code direkt im Kopf der HTML-Datei ein, oder man lagert den Code in eine externe CSS-Datei aus, die dann von jeder HTML-Seite "angezogen" wird.

CSS-Definitionen innerhalb einer HTML-Datei:
  <html>
    <head>
      <style type=text/css>
        html, body {
           SCROLLBAR-BASE-COLOR:       #ff0000;
           SCROLLBAR-3DLIGHT-COLOR:    #00ff00;
           SCROLLBAR-ARROW-COLOR:      #0000ff;
           SCROLLBAR-DARKSHADOW-COLOR: #ffff00;
           SCROLLBAR-FACE-COLOR:       #00ffff;
           SCROLLBAR-HIGHLIGHT-COLOR:  #ffffff;
           SCROLLBAR-SHADOW-COLOR:     #ff00ff;
           SCROLLBAR-TRACK-COLOR:      #000000; }
      </style>
    </head>
    <body>
      ...
    </body>
  </html>
Die Farbdefinitionen werden im <head> -Bereich der HTML-Datei angegeben.

CSS-Definitionen in externe CSS-Datei auslagern:
  ...
  <head>
    <link rel=stylesheet type="text/css" href="datei.css">
  </head>
  ...
Im head-Bereich der HTML-Datei die externe CSS-Datei verlinken.
  html, body {
    SCROLLBAR-BASE-COLOR:       #ff0000;
    SCROLLBAR-3DLIGHT-COLOR:    #00ff00;
    SCROLLBAR-ARROW-COLOR:      #0000ff;
    SCROLLBAR-DARKSHADOW-COLOR: #ffff00;
    SCROLLBAR-FACE-COLOR:       #00ffff;
    SCROLLBAR-HIGHLIGHT-COLOR:  #ffffff;
    SCROLLBAR-SHADOW-COLOR:     #ff00ff;
    SCROLLBAR-TRACK-COLOR:      #000000; }
In der CSS-Datei die Farbdefinitionen angeben.