-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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 5 — ?Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

注釈

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

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

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

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

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