Modifying 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:
::-webkit-scrollbar {
width: 22px;
}
The scroll bar track is the space above and below the scroll bar itself, as displayed as follows:
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);
}