CODEWITHSUNDEEP
css
rat1819
rat1819

Reputation: 21

How do I make a multi-coloured scrollbar?

I want to have a scrollbar that has multiple colours, including the background. I'm going for a Windows-XP style approach. Here's my current code I use to make the scrollbar 'blue'.

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #6699cc;
}

::-webkit-scrollbar-thumb:hover {
  background: #8abbeb;
}

I think adding a border will do it, but I don't know how to add it. Thanks a lot!

Upvotes: 0

Views: 548

Answers (2)

I_love_vegetables
I_love_vegetables

Reputation: 1341

I think adding a border will do it, but I don't know how to add it.

if you want to add a border to it, you can use outline. you can add it to the track, thumb or wherever you want the border to be

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #6699cc;
  outline: 5px solid red;
}

::-webkit-scrollbar-thumb:hover {
  background: #8abbeb;
}

but sometimes it only shows the outline at the top and bottom idk why

an alternative will be using border

border: 5px solid red;

Upvotes: 0

A Haworth
A Haworth

Reputation: 36512

I'm not sure I've totally understood, but you already are putting background colors on the thumb and the actual bar so you can change to linear-gradient background images to get this sort of thing: enter image description here

body {
  height: 300vh;
}
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #6699cc;
  background: linear-gradient(red, blue, orange, cyan);
}

::-webkit-scrollbar-thumb:hover {
  background: #8abbeb;
}
<body>A long body</body>

Upvotes: 0

Related Questions