If we want to change the color of the scroll bars on our page we can use properties CSS. Although we have to keep in mind that these properties are not supported by the standard CSS of the W3C.
That is, it depends on the web browser we are using and the support available for these elements. Using the CanIUse page we can verify that these properties are supported. We can see that it is done only in the Internet Explorer browser from Internet Explorer 5.5 to Internet Explorer 11.
The properties CSS of scrolls that we can use are the following:
- scrollbar-3dlight-color, color of the border that makes the 3D effect on the scroll bar.
- scrollbar-arrow-color, color of the arrows.
- scrollbar-base-color is the generic color to use for the scroll bar. We could only use this to color the bar.
- scrollbar-darkshadow-color, shadow of the progress bar.
- scrollbar-face-color, the color of what the progress bar actually is. That is, the block that moves along the bar.
- scrollbar-highlight-color, the color of the bar background.
- scrollbar-shadow-color are the two buttons that we can click on to move the bar.
- scrollbar-track-color is the background color of the scroll bar.
We will assign a color to the properties within a code area CSS. It will look like the following code:
body {
scrollbar-face-color:fuchsia;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:darkblue;
scrollbar-shadow-color:gray;
scrollbar-arrow-color:yellow;
scrollbar-track-color:aqua;
}
We see that we assign the properties to the element
body
of the language HTML, so that in this way it affects all the scrolling elements of the page.
We will only have to add an element that has scroll to our page. For this we use a
textarea
.
<textarea rows="15">... </textarea>
It should be noted that we have not found a browser that applies this to the scrolling of the page itself. Although it may remain anecdotal, it is always interesting the things that have been done to give style and in particular this case that allows us to change the color of the scroll bars.