-ms-scrollbar-highlight-color

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

CSS-ms-scrollbar-highlight-color プロパティは Microsoft 拡張で、スクロールバーのスライダートレイ、スクロールボックスの上辺と左辺、スクロール矢印の色を指定します。

初期値ThreeDHighlight
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

<color>

スクロールバーのスライダートレイ、スクロールボックスの上辺と左辺、スクロール矢印の色です。

形式文法

<color>

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

where
<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>? )

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

この例では、 -ms-scrollbar-highlight-color, -ms-scrollbar-face-color, -ms-scrollbar-arrow-color を使用して、異なる色のスクロールバーを持った二つの <div> オブジェクトを生成します。

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>

結果はこの画像の通りです。

Image for -ms-scrollbar-highlight-color example

仕様書

どの仕様書でも定義されていません。

ブラウザーの対応

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

注釈

Windows Internet Explorer 8+ 以降で対応しています。 -ms-scrollbar-highlight-color 属性は CSS への拡張で、 IE8 標準モードでは scrollbar-highlight-color の別名として使用することができます。

スクロールボックスとは、スクロールバー内の矩形のボックスで、上下または左右に移動することで、画面上のコンテンツの位置を変更することができます。スクロール矢印とは、スクロールバーの端に位置し、矢印が描かれた矩形のボタンで、画面上のコンテンツを上下または左右に少しだけ動かすためのものです。

このプロパティはスクロールバーを表示する要素に適用されます。 CSS は overflow プロパティによってすべてのオブジェクトでスクロールが有効になります。