ボックス

scrollbar-color

scrollbar-color は、スクロールバーのつまみ（ドラッグして動かす部分）と、溝（つまみが動く部分）の色を指定します。

構文

auto | <color>{2}

Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  overflow: auto;
  scrollbar-color: #4a86cb #e6f2f0;
}

scrollbar-color#4a86cb #e6f2f0

<color> <color>auto

つまみ（1 つ目の色）

溝（2 つ目の色）

色を 2 つ、スペースで区切って書きます。1 つ目がつまみ、2 つ目が溝の色です。1 つだけは書けません。溝を目立たせたくないときは、2 つ目を transparent にします。初期値の auto では、ブラウザと OS が決めた色になります。

スクロールバーは、overflow が auto や scroll の箱で、中身がはみ出したときに出ます。このページのプレビューも overflow: auto にして、縦にも横にもはみ出す文章を入れています。縦と横のスクロールバーが同じ色になります。

継承するので、html に書けばページ全体と、中のスクロールする箱のスクロールバーがまとめてその色になります。
つまみと溝の明るさの差が小さいと、つまみが見つけにくくなります。
macOS のように、スクロールしていないときはスクロールバーを隠す設定では、溝の色はふつう見えず、つまみもスクロールしている間だけ出ます。
Chrome・Edge は 121、Safari は 26.2 から対応しています。それまでは ::-webkit-scrollbar-thumb などの疑似要素で色を変えていました。Chrome・Edge では、scrollbar-color か scrollbar-width に auto 以外を書くと ::-webkit-scrollbar のスタイルは使われなくなります。