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

Browser
  • IE
Type
  • Extension

The scrollbar-***-color property changes the color of the scrollbars.
(*** = base, face, track, arrow, highlight, shadow, 3dlight, and darkshadow)

When you specify only a base color


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

When you specify the detailed color


div {
width: 70%;
height: 200px;
overflow: scroll;
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;
}

Property Value Explanation
scrollbar-base-color color code or name (1) the base color
scrollbar-face-color color code or name (2) the face color
scrollbar-track-color color code or name (3) the track color
scrollbar-arrow-color color code or name (4) the arrow color
scrollbar-highlight-color color code or name (5) the highlight color
scrollbar-shadow-color color code or name (6) the shadow color
scrollbar-3dlight-color color code or name (7) the 3D light color
scrollbar-darkshadow-color color code or name (8) the dark shadow color

Scrollbar image

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

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

</style>

</head>
<body>

<div>
<p>Box scrollbar color</p>
<p>Scroll</p>
...
</div>

</body>
</html>

Output

Box scrollbar color

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll