Kaworu
Active Coder
Hi
I have tried for the first time ever to change the scrollbar to my liking. Sadly, it is not working. The shape, color etc. of the scrollbar is the same as always, just like if I haven't written the CSS code.
I am using Chrome.
I have tried for the first time ever to change the scrollbar to my liking. Sadly, it is not working. The shape, color etc. of the scrollbar is the same as always, just like if I haven't written the CSS code.
I am using Chrome.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Scrollbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="big-space">
<p>AAAAAAAA</p>
<p>AAAAAAAA</p>
<p>AAAAAAAA</p>
</div>
<div class="big-space">
<p>AAAAAAAA</p>
<p>AAAAAAAA</p>
<p>AAAAAAAA</p>
</div>
<div class="big-space">
<p>AAAAAAAA</p>
<p>AAAAAAAA</p>
<p>AAAAAAAA</p>
</div>
</body>
</html>
CSS:
:root
{
/* background color */
--bcolor: #F1F1E6;
/* front color */
--fcolor: #3D486B;
/* th (table header) color */
--thcolor: #C5CEC2;
}
body
{
background-color: var(--bcolor);
color: var(--fcolor);
margin: 0;
padding: 0;
font-size: 20px;
}
p
{
font-weight: bold;
}
.big-space
{
height: 100vh;
}
/*
*******************************************
* !!! SCROLLBAR BELOW !!!
*******************************************
* */
*::-webkit-scrollbar-thumb
{
background-color: var(--fcolor);
border-radius: 10px;
}
*::-webkit-scrollbar-track
{
background-color: var(--bcolor);
}
Last edited by a moderator: