Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS CSS code for styling scrollbar is not working

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.

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:
Hello, @Kaworu.

First of all, we can't really do much if you don't share your code with us. Please do that first, then we can help; without the code, we cannot track down the error.

Second of all, are you trying to change the scrollbar in a webpage or is this change part of a browser theme/addon?
 
Dear @HadASpook :)

The code is in the Spoiler, divided between HTML and CSS, also in spoilers :) You just need to press some buttons with your mouse...? ;-)

Also, I try to change the scrollbar on a single webpage, and I just wanted to style it in the CSS of this particular webpage :) I am using no addons or themes, I wanna for this scrollbar to look exactly the same on every single browser no matter what (with the exclusion of Firefox, it is, I believe, styled differently?)
 
Ah, my apologies, @Kaworu - my browser wasn't rendering the spoiler code.

Anyways, you are correct, your code will not work on Firefox as it uses a different browser engine(Gecko). One tiny problem though, as listed here on MDN:
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Although it works(I have found examples for the property across the web), it's not always guaranteed to be stable or around forever as it is a non-standard feature of CSS - read the MDN article as it has some examples which may be of use. There is this though, which may answer some problems. Digital Ocean's tutorial may also help.

Hope this helps!
 
Ah, so I can both code it "properly" and it could still not work? That's confusing :laugh: But thank you for the explanation.

A question arises - is there a standard way to code that in CSS, at least for Chrome, or this feature is purely "experimental" and there's nothing better?

EDIT: scrollbar-color and scrollbar-width.? Maybe this will work?
 
Ah, so I can both code it "properly" and it could still not work? That's confusing :laugh: But thank you for the explanation.

A question arises - is there a standard way to code that in CSS, at least for Chrome, or this feature is purely "experimental" and there's nothing better?

EDIT: scrollbar-color and scrollbar-width.? Maybe this will work?
Pretty much. Your code could be right, but as it's a non-standard CSS feature, browsers are fine to drop support should they feel like it(note: the W3C is the governing body who manage the HTML/CSS standards).

I remember there being prefixes that could be placed before element properties(e.g. -moz for Mozilla(?)), but I'm pretty sure these aren't supported by any browser nowadays(I'll check back with you soon on this if I can).

Try the two properties you think will work and please let me know if they did the trick.
 
Hm... the two things I have found have two problems with them:

1. It is only for Firefox (I really like Chrome).
2. They make additional scrollbar instead of changing the main one. Plus there's no thumb on this additional scrollbar, it seems (? :laugh:).

But thank you for the explanation, all this time I thought I coded something wrong :) If there's no proper way to change the "built-in" scrollbar in CSS, that's fine, I just thought I had made some source code error.
 
If there's no proper way to change the "built-in" scrollbar in CSS, that's fine, I just thought I had made some source code error.
I'm pretty sure there should be a way to change the scroll bar, because some websites like Outlook have custom scrollbars.
 
No you cant change this :)

Best way to explain this is imagine your watching your favorite show live. Your show is your website, on your website that you have control over you can change what ever you want. Now everyone else at home is watching through there TV. You cant change there TVs. Does that make a bit more sense.
 
Ah, okay :D I have the SOLUTION! :D

You just need to use this:

CSS:
::-webkit-scrollbar
{
  width: 10px;
}

::-webkit-scrollbar-track
{
    background: var(--bcolor);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb
{
    background: var(--fcolor);
    border-radius: 10px;
}

Without the "*" at the beginning, neither "body", just the code above, with nothing before it :D

I am so happy I finally got it sorted out... :D

CSS-Scrollbar-SOLVED.png
 
Ah, okay :D I have the SOLUTION! :D

You just need to use this:

CSS:
::-webkit-scrollbar
{
  width: 10px;
}

::-webkit-scrollbar-track
{
    background: var(--bcolor);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb
{
    background: var(--fcolor);
    border-radius: 10px;
}

Without the "*" at the beginning, neither "body", just the code above, with nothing before it :D

I am so happy I finally got it sorted out... :D

View attachment 1363
I still wouldn't work on Firofox and other non-chromium browsers I think?
 
The code works for Chrome and Opera (and other browsers using the same engine, I think?). Firefox has a different engine, so it is not working, I believe? But there are alternative ways to code that in Mozilla too :)
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom