-2

I have heard someone saying "It's Impossible". But I don't believe in something named impossible. So, here is the best way to change the default Firefox scrollbar color via pure CSS.

Jodyshop
  • 656
  • 8
  • 12
  • 2
    Duplicate of [Scrollbar color change in Firefox](https://stackoverflow.com/questions/3890471/scrollbar-color-change-in-firefox) – DavidW Dec 15 '19 at 16:12
  • 2
    You posted [your answer to that old question](https://stackoverflow.com/questions/3890471/scrollbar-color-change-in-firefox/59345436#59345436), and then asked and answered this other question.... While self-answered questions are fine that doesn't mean you should be creating new duplicates – DavidW Dec 15 '19 at 16:15
  • Hello @DavidW. Yes, but I wanted to make it clear and add it as a reference for everyone looking for that solution (instead of watching it as a sub answer). Thanks for understanding. – Jodyshop Dec 15 '19 at 16:19
  • @DavidW You can delete the other answer and keep this one (if possible). Thanks. – Jodyshop Dec 15 '19 at 16:21
  • I can't delete the other answer. You could if you wanted to (there's a link underneath it) but I'd advise you not to - it looks like a useful answer. I'm not an expert in CSS and Firefox, but my opinion is that this question is close enough that it should be closed as a duplicate. If you disagree the places to argue your case are http://meta.stackoverflow.com or possibly the [CSS/HTML chat](https://chat.stackoverflow.com/rooms/29074/html-css-webdesign) to get an expert opinion (although it doesn't look anyone's there) – DavidW Dec 15 '19 at 16:30

1 Answers1

1

In the following example, I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar styles:

<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>

The Css will be:

.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}

.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}

.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}

Here are the final results:

(Note: The first image is the default scrollbar color).

enter image description here

Jodyshop
  • 656
  • 8
  • 12