How to change the scrollbar color using css [duplicate]

by

You can use the following attributes for webkit, which reach into the shadow DOM:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Here’s a working fiddle with a red scrollbar, based on code from this page explaining the issues.

http://jsfiddle.net/hmartiro/Xck2A/1/

Using this and your solution, you can handle all browsers except Firefox, which at this point I think still requires a javascript solution.

More Related Contents:

  1. Excessive Spaces Between Words [closed]
  2. Fill in text in HTML5
  3. How to disable margin-collapsing?
  4. Does “display:none” prevent an image from loading?
  5. Order columns through Bootstrap4
  6. Semi-transparent color layer over background-image?
  7. Transparent hollow or cut out circle
  8. vertical align middle in
  9. How to combine class and ID in CSS selector?
  10. Does CSS have a :blur selector (pseudo-class)?
  11. Gradient text color
  12. Specify multiple attribute selectors in CSS
  13. Bootstrap icons are loaded locally but not when online
  14. Bootstrap xs columns wrap
  15. image moves on hover – chrome opacity issue
  16. What Does ‘zoom’ do in CSS?
  17. Vertical-align image
  18. CSS display: table min-height not working
  19. Internet Explorer @font-face is failing
  20. Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?
  21. Is it possible to change only the alpha of a rgba background colour on hover?
  22. Spacing between thead and tbody
  23. How to code CSS media queries targeting ALL mobile devices and tablets?
  24. prevent a pseudo element from triggering hover?
  25. How to stretch children to fill cross-axis?
  26. Is vertical text-overflow possible with css3?
  27. Why shouldn’t I use position:absolute for positioning everything?
  28. Bootstrap Grid System new line does not look nice
  29. Issues with “background-position” in “background” shorthand property
  30. CSS – Font being blocked from Cross-Origin Resource Sharing Policy

Leave a Comment