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では定義されていません。