How can I increase a scrollbar's width using CSS?

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

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
}

JSFiddle Demo

References:

Solution 2 - Html

If you are talking about the scrollbar that automatically appears on a div with overflow: scroll (or auto), then no, that's still a native scrollbar rendered by the browser using normal OS widgets, and not something that can be styled(*).

Whilst you can replace it with a proxy made out of stylable divs and JavaScript as suggested by Matt, I wouldn't recommend it for the general case. Script-driven scrollbars never quite behave exactly the same as real OS scrollbars, causing usability and accessibility problems.

(*: Except for the IE colouring styles, which I wouldn't really recommend either. Apart from being IE-only, using them forces IE to fall back from using nice scrollbar images from the current Windows theme to ugly old Win95-style scrollbars.)

Solution 3 - Html

You can stablish specific toolbar for div

div::-webkit-scrollbar {
width: 12px;
}

div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

see demo in jsfiddle.net

Solution 4 - Html

This sets the scrollbar width:

::-webkit-scrollbar {
  width: 8px;   // for vertical scroll bar
  height: 8px;  // for horizontal scroll bar
}

// for Firefox add this class as well
.thin_scroll{
  scrollbar-width: thin; // auto | thin | none | <length>;
}

Solution 5 - Html

Yes.

If the scrollbar is not the browser scrollbar, then it will be built of regular HTML elements (probably divs and spans) and can thus be styled (or will be Flash, Java, etc and can be customized as per those environments).

The specifics depend on the DOM structure used.

Solution 6 - Html

My experience with trying to use CSS to modify the scroll bars is don't. Only IE will let you do this.

Content Type	Original Author	Original Content on Stackoverflow
Question	t0mcat	View Question on Stackoverflow
Solution 1 - Html	uınbɐɥs	View Answer on Stackoverflow
Solution 2 - Html	bobince	View Answer on Stackoverflow
Solution 3 - Html	Guillermo Nahuel Varelli	View Answer on Stackoverflow
Solution 4 - Html	Charles Okwuagwu	View Answer on Stackoverflow
Solution 5 - Html	Quentin	View Answer on Stackoverflow
Solution 6 - Html	Jim Fell	View Answer on Stackoverflow