customising scroll bars in html/CSS

Question

I have created a page with custom scroll bars. When I applied the code, all the scroll bars in the body and those of the browser window reacted to the code. Yet what i wanted is to customize only scroll bars for the body not those of the window.

How can i change this? Many thanks. Here is the webkit code.

::-webkit-scrollbar .right { width: 7px; } /* Track */ ::-webkit-scrollbar-track .right{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb .right{ -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); } ::-webkit-scrollbar-thumb:hover { background-color:#028eff; }

Tim M. · Accepted Answer · 2013-04-25 12:00:54Z

Demo: http://jsfiddle.net/2cpSW/2/ (webkit only)

You can use a more restrictive selector:

/* just for testing */ div.custom-scroll { overflow: auto; height: 200px; } /* modified selectors from question */ .custom-scroll::-webkit-scrollbar { width: 7px; } .custom-scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -webkit-border-radius: 10px; border-radius: 10px; } .custom-scroll::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } .custom-scroll::-webkit-scrollbar-thumb:hover { background-color:#028eff; }

It looks like you were trying to do this with (::-webkit-scrollbar .right). Perhaps all you need to do is correct the selector? (.right::-webkit-scrollbar).

Collectives™ on Stack Overflow

customising scroll bars in html/CSS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related