Member Avatar for vizz

I changed style of scrollbar in chrome how to make it usable in firefox & IE?

#thumbs::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #CCCCCC;
}

#thumbs::-webkit-scrollbar
{
    width: 6px; 
    background-color: #999999;
}

#thumbs::-webkit-scrollbar-thumb
{
    background-color: #fe003f;
    border: 1px solid #555555;
}
  • 2 Contributors
  • 2 Replies
  • 106 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by vizz

Dani AI

Generated

Your CSS uses WebKit-only pseudo-elements, so it will only change scrollbars in Blink/WebKit browsers (Chrome, Safari). As noted, that is why the same rules don’t affect Firefox or IE. The Codemug article linked explains techniques, but it won’t make a WebKit-styled scrollbar render identically in engines that don’t support those pseudo-elements.

For Firefox use the standard CSS Scrollbars properties. They only control color and width (not per-pixel thumb border or inset shadows), but they’re the simplest cross-platform option:

/* Firefox */
#thumbs {
  scrollbar-width: thin;
  scrollbar-color: #fe003f #CCCCCC;
}

See MDN: scrollbar-color and MDN: scrollbar-width for details.

For older Internet Explorer there were nonstandard properties (scrollbar-face-color, scrollbar-track-color, etc.) that only work in legacy IE; they’re deprecated and not supported in modern browsers. If you must target IE10 and below, those exist, but they aren’t portable and give poor accessibility.

If you need the exact Chrome look everywhere, the reliable option is to replace native scrollbars with a custom scroll container and draw the track/thumb in DOM/CSS (or use a tested library such as SimpleBar / OverlayScrollbars / PerfectScrollbar). That guarantees a consistent appearance but requires extra JS, careful focus/keyboard support, and testing in high-contrast and touch environments.

Practical approach:

  • Keep your WebKit rules for Chrome/Safari.
  • Add the Firefox rules above for Firefox users.
  • Leave sensible fallbacks for browsers that don’t support styling, or use a JS-based custom scrollbar if pixel-perfect uniformity is required.
  • Test keyboard scrolling, focus outlines, and mobile/touch behavior to avoid accessibility regressions.

Recommended Answers

All 2 Replies

Member Avatar for gabrielcastillo

Maybe this artical will help what you are looking for.

Member Avatar for vizz

I have tried that, but I want to make scrollbars same, as they looks in chrome, with my above code.

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.