La barre de défilement ou scrollbar peut être modifiée via les propriétés de style pour obtenir un aspect coloré différent de celui par défaut.

Cet effet de style n'est valable que pour les navigateurs Internet Explorer version et plus, c'est pourquoi je ne l'ai pas indiqué dans la rubrique sur le langage CSS.

Le style s'applique à la balise BODY, avec une valeur de couleur , selon deux modes différents :

Par une feuille de style : body { propriéte1: #CouleurHexa; } En code intraligne : body style="propriéte1: #CouleurHexa; propriété2: #CouleurHexa;"
Voici l'ensemble des propriétés que l'on peut utiliser :

Propriété Description Code
scrollbar-3dlight-color scrollbar-3dlight-color
Couleur de l'effet 3D du coté éclairé
scrollbar-3dlight-color: #FFFF9C
scrollbar-arrow-color scrollbar-arrow-color
Couleur de la flèche.
scrollbar-arrow-color: #FFFFEF
scrollbar-base-color scrollbar-base-color
Couleur de l'ensemble de la barre
scrollbar-base-color: #00A94F
scrollbar-darkshadow-color scrollbar-darkshadow-color
Couleur de l'effet 3D du coté sombre
scrollbar-darkshadow-color: #FF672F
scrollbar-face-color scrollbar-face-color
Couleur pour le dessus des boutons
scrollbar-face-color: #D0C8B0
scrollbar-highlight-color scrollbar-highlight-color
Couleur du coté éclairé
scrollbar-highlight-color: #80F88F
scrollbar-shadow-color scrollbar-shadow-color
Couleur du coté sombre
scrollbar-shadow-color: #27DDDB
scrollbar-track-color scrollbar-track-color
Couleur du fond
scrollbar-track-color: #330099
Cela donne l'aspect final suivant ( un peu étrange ) : résultat