scrollbar-***-color: ***;
- ブラウザ
- 特性
- 独自拡張プロパティ
scrollbar-***-color は、スクロールバーの色を指定するプロパティです。
（*** の部分には、base、face、track、arrow、highlight、shadow、3dlight、darkshadow が入ります）
このプロパティを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: 400px;
height: 7em;
}
textarea.example {
scrollbar-base-color: transparent;
scrollbar-arrow-color: transparent;
}
</style>
</head>
<body>
<p><textarea cols="50" rows="7" class="example">
デフォルトに戻す
</textarea></p>
<p><textarea cols="50" rows="7">
指定なし（色が適用される）
</textarea></p>
</body>
</html>
表示例
- サイト内検索
