ブラウザサポート状況

Firefoxは、紹介した疑似要素はサポートされていないです。
Firefoxもデザインを変更する方法でデザインを変える方法を解説しています。

iOS14〜はFirefoxもデザインを変更する方法で解説しているものも含めて、完全にサポートされていません。

実装サンプル

HTML
コピー
<div class="scroll_bar">::-webkit-scrollbar-trackと::-webkit-scrollbar-thumbではそれぞれborderプロパティやborder-radiusプロパティなどを使ったりして装飾できます。やりすぎると微妙かもしれませんが色々試してみるといいかもしれません。Firefoxはサポートされていませんが、Firefoxのデザインも変更する方法もこの記事で解説しています。</div>

CSS
コピー
.scroll_bar{
   background-color: #f0f0f0;
   overflow-y: scroll;
   width: 250px;
   height: 150px;
}
.scroll_bar::-webkit-scrollbar{
   width: 10px;
}
.scroll_bar::-webkit-scrollbar-track{
   background-color: #ccc;
}
.scroll_bar::-webkit-scrollbar-thumb{
   background-color: #17585d;
}

スクロールバー全てに共通指定したい？

上記の実装サンプルでは、特定の要素にのみCSSを適応させました。
サイト内のスクロールバー全てに同じCSSを当てるにはセレクターを指定しなければ良いです。
次のように記述します。

CSS
コピー
::-webkit-scrollbar{
   width: 10px;
}
::-webkit-scrollbar-track{
   background-color: #ccc;
}
::-webkit-scrollbar-thumb{
   background-color: #17585d;
}