Member Avatar for Croft .L

Does anyone have some CSS code to make the scroll bar on the browser a diffrent color!


Thank you for your help!

  • 3 Contributors
  • 3 Replies
  • 126 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

This thread began with asking how to change the browser scrollbar color. posted the old Internet Explorer SCROLLBAR-* properties and correctly noted they only applied to IE and could be affected by document mode/doctype. That IE technique is now obsolete and nonstandard — modern browsers use different, partially incompatible approaches.

For current projects use two approaches: the standard CSS Scrollbars module (the scrollbar-color and scrollbar-width properties, mainly for Firefox) and the WebKit/Blink pseudo-elements (for Chrome, Edge (Chromium), Safari, Opera). Example CSS (not the IE-only code from above):

/* Firefox */
html {
  scrollbar-color: #888 #f1f1f1;
  scrollbar-width: thin;
}

/* WebKit/Blink */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
  border: 3px solid #f1f1f1;
}

Browser support and notes: Firefox honors scrollbar-color/scrollbar-width; Chromium-based browsers and Safari use ::-webkit-scrollbar pseudo-elements. Many platforms (macOS, iOS, Android) use overlay or auto-hiding scrollbars, so styling may be invisible there. See the MDN docs for ::-webkit-scrollbar and scrollbar-color, and the compatibility matrix at Can I Use for current support: MDN ::-webkit-scrollbar, MDN scrollbar-color, Can I Use: CSS Scrollbars.

Accessibility caution: keep thumbs large enough to grab, maintain high contrast, and ensure keyboard focus/scroll behavior remains usable. For a consistent cross-browser look consider a tested JS/CSS scrollbar library, but weigh that against complexity and accessibility trade-offs.

Recommended Answers

All 3 Replies

Member Avatar for mostafadotnet

Hi Croft .L,
This is the code:

BODY {SCROLLBAR-FACE-COLOR: #D4D0C8; SCROLLBAR-HIGHLIGHT-COLOR: #999999; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR:  #000000; SCROLLBAR-TRACK-COLOR: #E3E3E3; SCROLLBAR-DARKSHADOW-COLOR: #666666; }

Good luck.

commented: Very Helpful! +2
Member Avatar for Croft .L

Wow thats good! Thanks!
It's taken me ages to get one thats works.
I've heard the colors only show in IE 5 +.
Is this true?
Thanks again!

Member Avatar for FC Jamison

Yes...scrollbar coloring only works in IE and not at all with an xhtml DOCTYPE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.