How to Make a Scrollbar Expand in Width With CSS
Internet Explorer introduced CSS color settings for scrollbars in IE version 5.5, but styles for scrollbars never became an official part of any CSS specification. However, Webkit-based browsers such as Safari and Chrome support CSS on scrollbars and allow you to change the width of the scrollbar. These browsers use pseudo-elements and the "-webkit" prefix to allow you to change styles on a variety of scrollbar pieces, including the track and the arrow buttons.
Other People Are Reading
Instructions
-
-
1
Open your style sheet file in Notepad or a code editor. Find the following CSS file linked in the head of your website's HTML:
<link rel="stylesheet" href="path/to/style.css" type="text/css" />
Write your CSS code at the bottom of the style sheet. If your Web page does not use external style sheets, add the CSS between "<style>" tags in the head of your HTML.
-
2
Add these three style rules:
::-webkit-scrollbar {
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-thumb {
}
The double-colons indicate psuedo-elements in CSS. These are elements you did not create in your HTML code; browser scrollbars fall into this category.
-
-
3
Set the width inside "::-webkit-scrollbar {}":
::-webkit-scrollbar {
width: 20px;
}
Setting this property alone does not create a working scrollbar in Safari or Chrome because both browsers disable all scrollbar styles when you set any property using the scrollbar pseudo-elements, so you end up with a blank, invisible scrollbar.
-
4
Give the scrollbar track a background color:
::-webkit-scrollbar-track {
background: #eee;
}
-
5
Add a background color to the scrollbar's "thumb" piece:
::-webkit-scrollbar-thumb {
background: #000;
}
The thumb piece is the part of the scrollbar that the user can click and drag to scroll up or down.
-
1
Tips & Warnings
Add "border-radius" to scrollbar pieces to create rounded corners, and add "box-shadow" with the inset value to add depth to the scrollbar.
Duplicate your scrollbar CSS and remove the "-webkit-" text from each rule. If CSS for scrollbars becomes an official part of the CSS specification set by the World Wide Web Consortium, or W3C, your code will be ready for use by other browsers.
As of the time of publication, non-Webkit browsers such as IE, Firefox and Opera do not support CSS on scrollbars.
