How can I increase a scrollbar s width using CSS

Question

Is it possible to increase the width of a scrollbar on a  lt div gt  element placed inside the  lt body gt    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  lt div gt  element has its own scrollbar

User · Accepted Answer

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.)

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt length gt

User · 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      JSFiddle Demo    References    Custom Scrollbars in WebKit   CSS-Tricks WebKit scrollbar demo from CSS-Tricks 15 Different scrollbar configurations

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

Examples related to html

Examples related to css

Examples related to scrollbar