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

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

scrollbar-***-color は、スクロールバーの色を指定するプロパティです。（*** の部分には、base、face、track、arrow、highlight、shadow、3dlight、darkshadow が入ります）


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

div.example1 {
width: 70%;
height: 200px;
overflow: auto;
scrollbar-base-color: #ff0000;
}


細かく設定する場合

div.example2 {
width: 70%;
height: 200px;
overflow: auto;
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の色指定をご覧ください。

  • このプロパティは、CSS 2では定義されていません。

使用例


<!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">

div {
width: 70%;
height: 150px;
overflow: auto;
background-color: #ffffff;
border: 1px #c0c0c0 solid;
scrollbar-base-color: #ff8c00;
scrollbar-arrow-color: #ffffff;
color: #000000;
}

</style>

</head>
<body>

<div>
<p>スクロールバーの色</p>
...
</div>

</body>
</html>
表示例

スクロールバーの色

スクロール

スクロール

スクロール

スクロール

スクロール

スクロール

スクロール