Grow your CSS skills. Land your dream job.

Css Tags For Mozilla Browser to style scrollbar

  • # July 12, 2013 at 9:53 am

    Below these are for the all other browsers expect mozilla. which tags i can use for mozilla??

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

    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff);
    background:#000;
    }
    ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #fff;
    background:#CCC;
    }*

    # July 12, 2013 at 10:18 am

    Just change use -moz instead of -webkit as we have showed you in the previous posts.

    Just note that they may not be **exactly** the same

    http://css-tricks.com/almanac/properties/a/appearance/

    # July 12, 2013 at 10:24 am

    Not sure if shadows and stuff are supported by Firefox scroll bars; I could be wrong.

    If you’re looking for cross-browser consistency in appearance, you might want to consider a fallback using JS for any browser engine that doesn’t support what you’re doing. jScrollPane is one option :: http://jscrollpane.kelvinluck.com/

    # July 12, 2013 at 10:26 am

    Also note that, I think, you have to state the -moz versions **separately** from the -webkit ones in your CSS.

    I’m note sure you can comma separate them.

    # July 13, 2013 at 7:12 am

    @Paulie_D

    I Have Done this for mozilla Browser but its not working..Get Me the solution Sir..

    ::-moz-scrollbar {
    width: 12px;
    }
    ::-moz-scrollbar-track {
    -moz-box-shadow: inset 0 0 6px #fff);
    background:#000;
    }
    ::-moz-scrollbar-thumb {
    border-radius: 10px;
    -moz-box-shadow: inset 0 0 6px #fff;
    background:#7A252B;
    }*

    # July 13, 2013 at 7:32 am

    Do you have a link you could share or perhaps a Codepen?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".