見出し画像

【html/CSS】Chromeでスクロールバーの色を変える

要素内でスクロールバーの色を指定しようとしたら、何故か上手くいかない。調べてみると「Chromeは疑似要素を使え」ということらしい。

/* 幅 */
html::-webkit-scrollbar {
    width: 20px;
}
/* 下地の色 */
html::-webkit-scrollbar-track {
    background: #00ff00;
}
/* つまみの色 */
html::-webkit-scrollbar-thumb {
    background:#0000ff;
}
/* 上端・下端のボタンの色 */
html::-webkit-scrollbar-button {
  background-color: #ff0000;
}

注意点は「幅」で、これを指定しないと元の色で出てしまいます。その他、いろいろ細かい指定ができるようですが、私は使いそうにないので、一旦ここまで。


この記事が気に入ったらサポートをしてみませんか?