firefox3.6で、スクロールバーの色やデザインを変更したいです。

質問

firefox3.6で、スクロールバーの色やデザインを変更したいです。
どのページを見ていても常に変更後のデザインを適用したいと思っています。

userchrome.cssを使えばよいのかな、と思ったのですが
設定方法がよく分かりませんでした。
どなたか変更方法をご存知の方教えていただけましたら幸いです。

firefoxのスクロールバーの色変更 - ブラウザ - 教えて！goo
http://okwave.jp/qa/q3042955.html

↑同様の質問を拝見し、試してみたのですがうまくいきませんでした…

想定環境はWindows7とXPです。

意味不明でしたら加筆修正しますのでよろしくお願いします。

回答No.2

neddoheny · ベストアンサー

/*スクロールバーとボタンの色（エメラルドグリーン）*/
scrollbarbutton,
thumb {
-moz-appearance:none !important;
background-color:#0e9 !important;
border-top:1px solid #3fc !important;
border-right:1px solid #0a3 !important;
border-bottom:1px solid #0a3 !important;
border-left:1px solid #3fc !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-colors:none !important;
}
/* スクロールバーにマウスオーバー時の色*/
thumb:hover{
border-top:1px solid #6fc !important;
border-right:1px solid #0c9 !important;
border-bottom:1px solid #0c9 !important;
border-left:1px solid #6fc !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-colors:none !important;
background-color:#3fb !important;
}
/* スクロールボタンにマウスオーバー時の色*/
scrollbarbutton:hover:active,
scrollbarbutton:active {
border-top:1px solid #0c9 !important;
border-right:1px solid #6fc !important;
border-bottom:1px solid #6fc !important;
border-left:1px solid #0c9 !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-colors:none !important;
background-color:#3fb !important;
}
scrollbarbutton {
background-repeat:no-repeat !important;
background-position:center center !important;
}
/* レールの色 */
slider {
background-color:#ffc !important;
-moz-border-left-colors:none !important;
-moz-border-bottom-colors:none !important;
border-style:none !important;
}
slider[orient="vertical"] {
background-color:#ffc !important;
-moz-border-left-colors:none !important;
border-style:none !important;
}

回答No.1

neddoheny

「userChrome.css」は、FirefoxのUI部分に適用する為のファイルです。
例えばサイドバー内のスクロールバーを変更したい場合などは、「userChrome.css」に記述します。ページ領域内側のスクロールバーにも適用させる場合は、「userContent.css」にも記述する必要があります。
但し、質問者の貼ったリンクはサイドバーのレールの部分の色を変更するだけのコードなので殆ど意味ないです。

一応、当方で他の参考サイトを参照にして簡単に検証してみました。
[参考サイト]
http://www.geocities.jp/adsldenet/past/sample.html

文字数制限があるので、2回目の回答にコードを記述しますが、そのコードを「userChrome.css」と、「userContent.css」の両方ともに貼り付ければOKです。
当方、Windws XP SP3 Firefox3.6.10で検証済み。（Windows 7は知りません）
添付画像を参照。

スクロールバーの色、その他のアレンジ等はそちらで好きにしてください。