scrollbar-***-color: ***;
| Browser |
|
|---|---|
| Type |
|
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 |
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