scrollbarの色設定
・スクロールバーの各部分の色を指定。IE独自機能、他のプラウザは無視
・<body>,<textarea>やoverflowでスクロールバーを表示した要素だけに適用できる。
・継承する。
(種類)
scrollbar-base-color:(色値) ･･･他の設定を省いた場合のベース色
scrollbar-face-color:(色値) ･･･スライダーの表面色
scrollbar-track-color:(色値) ･･･スクロールバーの下地色
scrollbar-arrow-color:(色値) ･矢印の色
scrollbar-higtlight-color:(色値) ･･･ボタンの明るい側の色
scrollbar-shadow-color:(色値) ･･･ボタンの影の色
scrollbar-3dlight-color:(色値) ･･･ボタンの上／左側の色
scrollbar-darkshadow-color:(色値) ･･･ボタンの下／右側の色
Sample
ページ全体に
<style type="text/css">
html,body {scrollbar-base-color:green;scrollbar-face-color:navy;
scrollbar-arrow-color:aqua;scrollbar-track-color:pink}
</style>
が設定されている。
scrollbar-base-color:yellowだけ指定
face-colorとarrow-colorとtrack-colorは
BODY要素から継承されている
scrollbar-base-color:pink
scrollbar-arrow-color:white
scrollbar-track-color:#d8d8d8
を指定。face-colorは継承されている
他も指定
scrollbar-base-color:pink
scrollbar-face-color:#b0e0e0
scrollbar-arrow-color:red
scrollbar-track-color:#d8d8d8
★<body style="scrollbar-base-color:････">形式で直接指定する方法は不可だった(?)。ヘッダー内で<style type="text/css">を使って指定すればOK。ただし、html,body {･･･}のようにhtmlを付け加えなければならない。（このへんはイマイチよく分らない。いつか調べたい）
Sample Source......................................................................>>>
<style type="text/css">
html,body {scrollbar-base-color:green;scrollbar-face-color:navy;
scrollbar-arrow-color:aqua;scrollbar-track-color:pink}
</style>
</head>
<body>
<div style="width:160px;height:130px;border:1px solid navy;
overflow:scroll;scrollbar-base-color:yellow">
サクラの画像<img src="../../images/cut/sakura.gif">
</div>
<div style="width:160px;height:130px;border:1px solid navy;overflow:scroll;
scrollbar-base-color:pink;scrollbar-arrow-color:white;scrollbar-track-color:#d8d8d8">
サクラの画像<img src="../../images/cut/sakura.gif">
</div>
<div style="width:160px;height:130px;border:1px solid navy;overflow:scroll;
scrollbar-base-color:pink;scrollbar-face-color:#b0e0e0;
scrollbar-arrow-color:red;scrollbar-track-color:#d8d8d8">
サクラの画像<img src="../../images/cut/sakura.gif">
</div>