scrollbar-***-color: ***;

ブラウザ
  • IE
  • O
プロパティ
  • 独自拡張プロパティ

scrollbar-***-color は、スクロールバーの色を指定するプロパティです。(*** の部分には、basefacetrackarrowhighlightshadow3dlightdarkshadow が入ります)

このプロパティをbody要素に対して設定すると、ページのスクロールバーの色を指定することができます。


基本色だけで指定する場合

body {
scrollbar-base-color: #ff0000;
}


細かく設定する場合

body {
scrollbar-face-color: #ff8c00;
scrollbar-track-color: #fff8dc;
scrollbar-arrow-color: #ffffff;
scrollbar-highlight-color: #fff8dc;
scrollbar-shadow-color: #d2691e;
scrollbar-3dlight-color: #ffebcd;
scrollbar-darkshadow-color: #8b0000;
}

プロパティ名 説明
scrollbar-base-color (1)基本色を指定
scrollbar-face-color (2)ボタン部分を指定
scrollbar-track-color (3)レール部分を指定
scrollbar-arrow-color (4)矢印を指定
scrollbar-highlight-color (5)内側のハイライトを指定
scrollbar-shadow-color (6)内側の影を指定
scrollbar-3dlight-color (7)外側のハイライトを指定
scrollbar-darkshadow-color (8)外側の影を指定

[スクロールバーの色設定]

  • 各プロパティは単体で使用することもできます。

色の指定については、CSSの色指定をご覧ください。

参考

使用するセレクタについて
表示モード互換モードの場合はbody要素に対して設定しますが、標準モードの場合はhtml要素に対して設定する必要があります。
Operaでの対応について
このプロパティがbody要素に設定されている場合に対応しています。(html要素に設定した場合は反映されません)
  • body要素に設定した場合でも、ブラウザの設定を変えないと反映されない場合があるようです。
インラインフレームのスクロールバー
インラインフレームのスクロールバーの色は、そのフレームに読み込まれる文書で設定します。
テキストエリアのスクロールバー
ページのスクロールバーの色を指定すると、その色がテキストエリアのスクロールバーにも適用されてしまいます。テキストエリアのみ通常の色に戻したい場合は、textarea要素transparent を指定します。(具体的な指定方法については、以下の使用例を参考にしてください)
  • このプロパティは、CSS 2では定義されていません。

使用例

基本色を赤系、矢印を白にした例

[互換モード]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

body {
scrollbar-base-color: #ff0000;
scrollbar-arrow-color: #ffffff;
background-color: #ffffff;
color: #000000;
}

</style>

</head>
<body>



</body>
</html>

表示例

サンプル画面へ新規ウィンドウで表示

テキストエリアのスクロールバーをデフォルトに戻した例

[標準モード]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

html {
scrollbar-base-color: #ff0000;
scrollbar-arrow-color: #ffffff;
}

body {
background-color: #ffffff;
color: #000000;
}

textarea {
width: 250px;
height: 5em;
}

textarea.example {
scrollbar-base-color: transparent;
scrollbar-arrow-color: transparent;
}

</style>

</head>
<body>

<p><textarea cols="30" rows="5" class="example">
デフォルトに戻す
</textarea></p>

<p><textarea cols="30" rows="5">
指定なし(色が適用される)
</textarea></p>

</body>
</html>

表示例

サンプル画面へ新規ウィンドウで表示