-ms-scrollbar-highlight-color

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La propriété CSS -ms-scrollbar-highlight-color est une propriété spécifique à Microsoft qui définit la couleur pour la piste et le contour d'une barre de défilement.

Syntaxe

Valeurs

<color>

La couleur à utiliser pour le contour et la piste de la barre de défilement, cf. <color>.

Syntaxe formelle

<color>


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

Dans l'exemple qui suit, on utilise -ms-scrollbar-highlight-color, -ms-scrollbar-face-color ainsi que -ms-scrollbar-arrow-color afin de créer deux <div> ayant chacun un thème différent pour les barres de défilement.

CSS

div {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: thin;
  overflow-y: scroll;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
}
.blueScroll {
  -ms-scrollbar-highlight-color: aqua;
  -ms-scrollbar-face-color: blue;
  -ms-scrollbar-arrow-color: blue;
  border-color: blue;
}
.redScroll {
  -ms-scrollbar-highlight-color: bisque;
  -ms-scrollbar-face-color: red;
  -ms-scrollbar-arrow-color: red;
  border-color: red;
}

HTML

<body>
  <div class="blueScroll">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="redScroll">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</body>

Résultat

L'image qui suit permet d'avoir un aperçu du résultat si votre navigateur n'est pas compatible avec ces fonctionnalités.

Image for -ms-scrollbar-highlight-color example

Spécifications

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

Valeur initialeThreeDHighlight
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

No compatibility data found. Please contribute data for "css.properties.-ms-scrollbar-highlight-color" (depth: 1) to the MDN compatibility data repository.

Notes

Pour IE 8, la propriété -ms-scrollbar-highlight-color est une extension et peut être utilisée comme synonyme de scrollbar-highlight-color en mode standard.

Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété overflow.