Changer la couleur de la barre de dÃ©filement - HTML/CSS

La barre de scroll à droite est souvent grise et monotne ...

Vous avez un site aux couleurs vives, ou ternes, ou n'importe quelles couleurs, d'ailleurs Clin d'oeil ...
Vous avez sans doute l'envie de changer cette barre de défilement grise et laide a droite , lorsque le site est plus grand que l'écran en hauteur.

Voici le code à copier / coller entre les balises <head> et </head> :

Code

<STYLE TYPE="text/css">
BODY {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
}
</STYLE>

En changeant les #000000 ( couleur blanche ) par la couleur hexadécimale de la couleur souhaitée !

( faites plusieurs tests pour trouver la couleur qui vous intéresse. Chaque ligne change un bout de la couleur de la barre de défilement ( le côté, le plein, l'ombre, etc ... )

Détails :

Code

scrollbar-face-color :couleur du dessus des boutons et de la barre de défilement
scrollbar-shadow-color : couleur sombre du relief des boutons
scrollbar-highlight-color :couleur claire du relief des boutons
scrollbar-3dlight-color : couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés
scrollbar-darkshadow-color :couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés
scrollbar-track-color : couleur du fond de la barre
scrollbar-arrow-color :couleur des flèches

Par Pouzy , Le 27 Novembre 2004 à 14h02
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à HTML/CSS

Ajouter un commentaire

Suite a un fort volume de spam, les commentaires d'invités sont pour le moment désactivés. Vous devez vous inscrire ou vous identifier pour pouvoir commenter cet article, ou demander du support.

Lectures recommandées

Commentaires sur cet article

coco - Le 20 Décembre 2010 à 22h33

OK mais ne semble plus fonctionner plus sous IE8 alors que cela marchait très bien sur d'anciennes versions, ne marche pas sous Firefox mais parfais sous Opera.

youraman - Le 15 Janvier 2007 à 10h25

bonjour,
sur le site que je suis en train de creer en ce moment, j'ai essayé le tuto qui a été proposé pour un page imposant un défilement, ça marche sour IE7, mais ce que je souhaite avoir c'est modifier la barre de defilement de la Iframe contenu dans une page; j'ai placé le srcipt entre la balise <head></head> de la page devant s'afficher dans la iframe, mais il ya aucun effet.
quelqu'un pourrait til m'aider; merci d'avance

Orangeloulou - Le 13 Juin 2006 à 18h53

Salut,

j'ai testé ce code sous internet explorer 7 et ça n'a pas l'air de prendre effet...
Bref, ie 7 sera tout aussi nul ^^

Orange ^^

Pouzy - Le 16 Novembre 2005 à 19h59

En effet, j'ai oublié de le préciser Sourire Cela n'aura aucun effet sous Firefox & co...

Killpatate - Le 16 Novembre 2005 à 18h13

Je croyais que cela ne marché que pour Internet Explorer ??