スクロールバーカラー scrollbar color

色付きのHTMLスクロールバーを作成。

色付きのHTMLスクロールバーを作成。

スクロールバーカラー scrollbar color

HTMLテキストエリアとスクロールバーのスタイルを作成します。スクロールバーをカスタマイズ。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。

<textarea id="textarea"></textarea>

TextArea

borderStyle

borderWidth

borderColor

backgroundColor

textColor

ScrollBar

scrollbarWidth

scrollbarColor(thumb)

scrollbarColor(track)

動作環境(2022-09-08時点)
・Google Chrome 105
・Microsoft Edge 105
・Mozilla Firefox 104
・Apple Safari 15.6 --- スクロールバーのスタイルは適用されません。
使い方：
textareaおよびscrollbarのスタイルを変更します。完了したら表示されているスタイルをコピーします。
id名やその他書き換えてご使用ください。
(2022-09-08時点)

以下の属性はFirefoxのみに実装されています。
scrollbar-width
scrollbar-color

Chrome,Edgeは以下の擬似要素が代用になります。
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track

Safariはスクロールバーのスタイルは適用されません。
2022年9月初版
2024年10月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。