-ms-scrollbar-arrow-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.

La propriété CSS -ms-scrollbar-arrow-color est une propriété spécifique à Microsoft qui définit la couleur des flèches pour les extrêmités des barres de défilement.

Syntaxe

Valeurs

<color>

La couleur à utiliser pour les flèches des barres de défilement, voir <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

L'exemple qui suit illustre comment utiliser -ms-scrollbar-arrow-color et -ms-scrollbar-face-color afin d'afficher une boîte avec une barre de défilement avec un curseur et des flèches bleues d'une part et une boîte avec une barre de défilement avec un curseur et des flèches vertes d'autre part.

CSS

div {
  width: 150px;
  height: 150px;
  overflow-y: scroll;
  border-style: solid;
  border-width: thin;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
}
.blueScrollBox {
  scrollbar-face-color: blue;
  scrollbar-arrow-color: blue;
}
.greenScrollBox {
  scrollbar-face-color: green;
  scrollbar-arrow-color: green;
}

HTML

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

Voici le résultat obtenu :

Image for -ms-scrollbar-arrow-color usage example

Spécifications

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

Valeur initialeButtonText
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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Non Non Non5 —? Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Non Non Non Non Non Non Non

Notes

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

Les flèches de défilement sont présentes sur les boutons situés à chaque extrêmité de la barre de défilement.

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.

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,