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


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -