how to change browsers default scrollbar using css or jquery


Tags: jquery,html,css,css3,scrollbar

Problem :

How to replace custom style scrollbar with default browser's scrollbar (i can able to change in chrome using webkit)

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: #CFCFCF
}
::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5
}
::-webkit-scrollbar-thumb {
    background-color: #2C3E50
}

But i want to change in mozilla firefox too.. Help me pls



Solution :

Using CSS you can only style the webkit's scrollbar.

If you want a cross browser solution you can use the following plugin:

http://jscrollpane.kelvinluck.com/

or you can choose any from the list given on the following link:

http://www.sitepoint.com/10-jquery-custom-scrollbar-plugins/


    CSS Howto..

    How to make a div tag without margins in css? [duplicate]

    how to encrypt css/js filename

    How to make a vertically extendable DIV box from this image?

    How to override a *{list style:none} property

    How to do automatic reload of page when viewed in iPad Portrait mode?

    css - how to get (responsive) li's with the same height when they have a different width?

    How a css selector is applied when reffering to multiple classes, ids, or elements?

    section to be trigger of show/hide content by click html/css only

    Unicode character, down triangle, shows up as strange text

    Nested CSS: How to get to the child?

    How to reference a long class name with spaces in CSS?

    How to give the a specific background color in CSS?

    Difference in css position IE/FF, how to solv my problem?

    How do I assign styling to a Javascript variable?

    how to obtain proper alignment of tables on top of each other with horizontal scrollbar at bottom

    How to set a timer for CSS animation-timing-function?

    How to ignore body element style when there is a class at element inside

    How to center a image with transparent background in css?

    Search type links in Yahoo - how to implement similar behaviour

    webpage works well on all browsers except Android Browser, which shows fonts with increased size

    How to hide crossed-out CSS lines on firebug?

    How can I use a link to navigate between input boxes?

    How to bundle Angular 2 component css?

    CSS: how can I make this table fit the border when resized?

    Cutting out the middle portion of an image (example shown)?

    How do I make an image resize inside a div that is resizing to a percentage of a parent div?

    How do I center content and extend the background color to 100% of the page?

    How can I make a CSS selector for a button with two classes existing in .less?

    How to align item to the very bottom within flexible box layout column?

    How to show text on image when hovering?