scrollbar-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

scrollbar-color の値がドキュメントのルート要素に設定されている場合、その値はビューポートのスクロールバーに適用されます。

構文

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

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

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

値

<scrollbar-color>

スクロールバーの色を定義します。

auto 他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。
<color> <color> 最初の色をスクロールバーのつまみに、 2 番目の色をスクロールバーのトラックに適用します。

メモ: @media (forced-colors: active) とすると、scrollbar-color が auto になります。

アクセシビリティ

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

公式定義

初期値auto
適用対象スクロールするボックス
継承あり
計算値指定通り
アニメーションの種類計算値の型による

形式文法

scrollbar-color = 
  auto        |
  <color>{2}

例

あふれた場合のスクロールバーに着色する

CSS

css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #007 #bada55;
}

HTML

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>

結果

仕様書

Specification
CSS Scrollbars Styling Module Level 1
# scrollbar-color

ブラウザーの互換性

BCD tables only load in the browser

関連情報