Modifying color and width of scroll bars

Note: Only webkit browsers, such as Chrome and Safari, allow for modifications to the color and width of scroll bars.

If a survey is longer than the window in which it is displayed, a scroll bar appears on the right-hand side. Modifying the width and color of the scroll bar highlights to a customer that there is more to see on the form.

In the following example, the scroll bar is set to a width of 22 pixels, which is considered very wide:Image showing the scroll bar set to a width of 22 pixels.

::-webkit-scrollbar {
 width: 22px;
} 

The scroll bar track is the space above and below the scroll bar itself, as displayed as follows:

Image showing the scroll bar and scroll bar track.

In the following example, the scroll bar is set to a bar track width of 6 pixels with top and bottom of the track rounded with a border radius of 10 pixels, color edge with pale grey showdown and transparency #0000004D:

/* Track */
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px #0000004d;
 -webkit-border-radius: 10px;
 border-radius: 10px;
} 

In the following example, the scroll bar itself has rounded ends with a radius of 10 pixels and a bright red color with pale grey gradient shadow:

/* Handle */
::-webkit-scrollbar-thumb {
 -webkit-border-radius: 10px;
 border-radius: 10px;
 background: rgba(255,0,0,0.8);
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}