これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSscrollbar-color プロパティは、スクロールバーのトラックとつまみの色を設定します。

トラックはスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。

つまみはスクロールバーの動く部分で、ふつうはトラックの上を動きます。

初期値auto
適用対象スクロールするボックス
継承あり
メディア視覚
計算値指定値
アニメーションの種類
正規順序構文通り

構文

/* キーワード値 */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <color> 値 */
scrollbar-color: rebeccapurple green;   /* 二つの有効な色。
一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 */

/* グローバル値 */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

<scrollbar-color>
スクロールバーの色を定義します。
auto 他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。
dark 暗い色のスクロールバーを示し、プラットフォームで提供している暗い色のスクロールバー化、暗い色のカスタムスクロールバーのどちらかになります。
light 明るい色のスクロールバーを示し、プラットフォームで提供している明るい色のスクロールバー化、明るい色のカスタムスクロールバーのどちらかになります。
<color> <color> 最初の色をスクロールバーのつまみに、二番目の色をスクロールバーのトラックに適用します。

メモ: ユーザーエージェントはビューポートのルート要素に、何らかの scrollbar-color の値を適用しなければなりません。

形式文法

auto | dark | light | <color>{2}

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>

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}

HTML

<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>

結果

アクセシビリティの考慮事項

scrollbar-color プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを確認してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。

仕様書

仕様書 状態 備考
CSS Scrollbars Level 1
scrollbar-color の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 64
補足
完全対応 64
補足
補足 On macOS, you need to set the General > Show scroll bars setting in System Preferences to "Always" for this property to have any effect.
完全対応 63
無効
無効 From version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 64
完全対応 64
完全対応 63
無効
無効 From version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

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

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