-ms-scrollbar-highlight-color

ここへジャンプ:

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 

The -ms-scrollbar-highlight-color CSS property is a Microsoft extension that specifies the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.

Initial valuedepends on user agent
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

<color>

The color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.

Formal syntax

  <color>

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

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

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

Examples

This example uses -ms-scrollbar-highlight-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes.

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;
}
<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>

This image shows the result:

Image for -ms-scrollbar-highlight-color example

Specifications

Not part of any specification.

Remarks

Support in Windows Internet Explorer 8+. The -ms-scrollbar-highlight-color attribute is an extension to CSS, and can be used as a synonym for scrollbar-highlight-color in IE8 Standards Mode.

The scroll box is the rectangular box within a scroll bar that can be moved either up and down or left and right on a track to change the position of the content on the screen. The scroll arrows, located at each end of a scroll bar, are the square buttons containing the arrows that move the content on the screen in small increments — either up and down or left and right.

This property applies to elements that display a scroll bar. CSS enables scrolling on all objects through the overflow property.

ドキュメントのタグと貢献者

このページの貢献者: chrisdavidmills, jameshkramer
最終更新者: chrisdavidmills,