【scrollbar-★-color】スクロールバーの色を指定する

scrollbar-★-colorプロパティでは、スクロールバーの色や矢印の色、ボタン色といったデザインを指定することができます。(★には、base、face、arrow、track、3dlight、highlightなどが入る)

ブラウザ全体に表示されるスクロールバーの色を変更したい場合は、HTML要素に対してscrollbar-★-colorプロパティ(scrollbar-base-colorやscrollbar-arrow-colorなど)を指定します。

また<DIV><TEXTAREA>などに対して指定すると、ページ内に表示される各スクロールバーの色を変更することが可能です。

なおwebページ全体(ブラウザ全体)のスクロールバーの色を指定する場合、<!DOCTYPE>でブラウザの表示モードが標準準拠モードの時はHTML要素に、互換モードの時はBODY要素に対してスクロールバーの色を指定します。

※Internet Explorer(IE)6以降の標準準拠モードの時はHTML要素に、IE5.5の時はBODY要素に対し指定する。IE6以降とIE5.5の両方でスクロールバーの色を指定したい場合、HTML要素とBODY要素に対して指定する必要があるようです。

これらのscrollbar-base-color~scrollbar-shadow-colorプロパティは、Internet Explorerが独自に追加したプロパティです。 一般的なブラウザでは対応していないので注意して下さい。 ただしOperaの場合、BODY要素に対して指定するとこれらのプロパティが有効となります。

※ブラウザの表示モードが「互換モード」の場合

またインラインフレームのスクロールバーの色は、そのフレームに読み込まれるHTML文書の方で設定して下さい。 ページ全体のスクロールバーの色を変更し、テキストエリアなどのスクロールバーの色も変わってしまう場合は、<TEXTAREA>に対して「scrollbar-★-color: transparent」というように、値にtransparentを指定します。

書式

  • scrollbar-base-color : ……… 全体の基本色
  • scrollbar-face-color : ……… スクロールバーの表面の色
  • scrollbar-arrow-color : ……… 矢印の色
  • scrollbar-track-color : ……… スクロールバーの背景の色(レール部分)
  • scrollbar-3dlight-color : ……… ボタン外側のハイライトの色(左端と上端)
  • scrollbar-highlight-color : ……… ボタン内側のハイライトの色
  • scrollbar-shadow-color : ……… ボタン外側のシャドウの色
  • scrollbar-darkshadow-color : ……… ボタン内側のシャドウの色(右端と下端)

★:色、transparent

スクロールバーの色指定可能な部位一覧

スクロールバーの色をRGB値、または「red」などのカラーネームで指定します。指定できる色についてはカラーコード一覧を参照
transparent
スクロールバーの色を透明(反映しないよう)にします。transparentが指定された領域は透明となり、結果的にその要素が含まれる親ボックスの内容、背景、背景画像などが透けて見えるようになります。

使用した時の例

/* ページ全体のスクロールバーの色 */
html,body {
  scrollbar-base-color: #FF8C00;
  scrollbar-arrow-color: #ffffff;
}

/* divなどボックスのスクロールバーの色 */
.overflow-scroll {
  width:250px;
  height:130px;
  overflow:scroll;
  border:solid 1px #ccc;
}
.sample1{scrollbar-base-color: #ff0000;}
.sample2{scrollbar-face-color: #ff0000;}
.sample3{scrollbar-arrow-color: #ff0000;}
.sample4{scrollbar-track-color: #ff0000;}
.sample5{scrollbar-3dlight-color: #ff0000;}
.sample6{scrollbar-highlight-color: #ff0000;}
.sample7{scrollbar-shadow-color: #ff0000;}
.sample8{scrollbar-darkshadow-color: #ff0000;}
.sample9{scrollbar-face-color: transparent;}
<div class="sample1 overflow-scroll">
scrollbar-base-color
<!--省略-->
</div>
<div class="sample2 overflow-scroll">
scrollbar-face-color
<!--省略-->
</div>
<div class="sample3 overflow-scroll">
scrollbar-arrow-color
<!--省略-->
</div>
<div class="sample4 overflow-scroll">
scrollbar-track-color
<!--省略-->
</div>
<div class="sample5 overflow-scroll">
scrollbar-3dlight-color
<!--省略-->
</div>

<!--残りは省略(表示例で確認できます)-->

ブラウザ上の表示例

表示例を見る(ボックス)

※上記はボックスのスクロールバーの色の表示例となります。ページ全体の方は、このページ内に設定してあります。
Internet Explorerで見るようにして下さい。

対応ブラウザなどのデータ

初期値 auto 値の継承 継承する
適用可能な要素 スクロールバーを持つ要素
メディア visual / scrollbar
対応ブラウザ Internet Explorer5.5~ , Opera7~