customising scroll bars in html/CSS -
i have created page custom scroll bars. when applied code, scroll bars in body , of browser window reacted code. yet wanted customize scroll bars body not of window.
how can change this? many thanks. here 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; }
demo: http://jsfiddle.net/2cpsw/2/ (webkit only)
you can use more restrictive selector:
/* testing */ div.custom-scroll { overflow: auto; height: 200px; } /* modified selectors 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 trying (::-webkit-scrollbar .right
). perhaps need correct selector? (.right::-webkit-scrollbar
).
more reading: pseudo element selectors