How can I increase a scrollbar's width using CSS?
Is it possible to increase the width of a scrollbar on a <div> element placed inside the <body>?
I am not talking about the default scrollbar on the browser itself, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner <div> element has its own scrollbar.
Answer
This can be done in WebKit-based browsers (such as Chrome and Safari) with only CSS:
::-webkit-scrollbar {
width: 2em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
::-webkit-scrollbar-track-piece {
background: #888
}
::-webkit-scrollbar-thumb {
background: #eee
}
References: