Mettre des couleurs à son ascenseur

Une touche personnelle

La version 5.5 d'Internet Explorer (et supérieur) permet de personnaliser les couleurs de l'ascenseur de son navigateur aussi bien pour les pages web trop longues que pour les formulaires. Malheureusement, ces tags sont propriétaires et ne sont pas reconnus par le W3C. Autrement dit, seuls les utilisateurs de ce navigateur verront ces jolies couleurs. Les exemples ci-dessous ne sont que des images.

ascenseur 1 ascenseur 2 ascenseur 3 ascenseur 4

Pour réaliser cet exercice, on utilise une feuille de style qui va s'appliquer à l'ensemble des pages grâce à la personnalisation de la balise <body>. Ouvrez votre fichier CSS externe et ajoutez les éléments qui vous intéresse.

  1. body {
  2. scrollbar-3dlight-color: #666;
  3. scrollbar-arrow-color: #000;
  4. scrollbar-darkshadow-color: #e2e2e2;
  5. scrollbar-face-color: #000;
  6. scrollbar-highlight-color: #ededed;
  7. scrollbar-shadow-color: #000;
  8. scrollbar-track-color: #fff;
  9. scrollbar-base-color: #080;
  10. }

Chaque élément scrollbar est illustré ci-dessous par la zone en rouge. De cette manière, il est plus facile de repérer l'attribut à de le régler en fonction de ses préférences.

3dlight-color
arrow-color
darkshadow-color
face-color
3dlight color
arrow color
darkshadow color
face color
Couleur 3D du côté gauche
Flèche directionnelle
Couleur 3D du côté droit
Couleur du dessus
       
highlight-color
shadow-color
track-color
base-color
highlight color
shadow color
track color
base color
Côté éclairé
Côté sombre
Couleur de fond
Ensemble de la barre

Faire disparaître la barre de défilement

Il est possible de supprimer l'ascenseur lorsqu'il n'est pas indispensable. C'est le cas des formulaires. Rien de plus inesthétique que de voir une barre grise sans utilité. Pour y arriver, il suffit d'ajouter l'attribut style="overflow:auto de la balise <textarea>. L'ascenseur apparaîtra uniquement si nécessaire.

Sujet:
Message:
 

 

  1. <textarea name="message" cols="22" rows="7" style="overflow:auto">
  2. </textarea>

 

Réalisé le 21 décembre 2003.
haut