CODEWITHSUNDEEP
cssfirefoxscrollbar
Puru
Puru

Reputation: 9083

How to change the scroll bar color in Firefox(Specific)?

I need to change the scroll bar color in Firefox. Using CSS I am able to change scroll bar color in IE. It works fine. But I cannot see the change in Firefox.

I dont want any custom scroll bars. I want to apply the color to the default scroll bar only.

Upvotes: 1

Views: 4776

Answers (6)

Andhi Irawan
Andhi Irawan

Reputation: 481

for Firefox or cross browser you can use : jQuery custom content scroller

more simple and easy to use

Github : https://github.com/malihu/malihu-custom-scrollbar-plugin

How to use : Download the source from the web or Github.

Include jquery.mCustomScrollbar.concat.min.js and jquery.mCustomScrollbar.css on your header.

Add the class mCustomScrollbar to any element you want to add custom scrollbar(s) with default options. Example of mine : <div class="long40 right reviews-frame mCustomScrollbar"> Call mCustomScrollbar function on the element selector you want to add the scrollbar(s). I call in bottom of my phtml page (list.phtml) like this :

....    
</div>
<script>
(function($){
    $(window).load(function(){
        $(".content").mCustomScrollbar();
    });
})(jQuery);
</script>

Other setting and documentation you read on their web.

Sample I used it in Magento : i.imgur.com/3OwGQld.png

The following example of a scrollbar color css code that I modified :

#mCSB_1_dragger_vertical {
   height: 130px !important; /* height of the scrollbar */
}
.mCSB_dragger_bar {
   background-color: #ececec !important; /* color of the dragger bar */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
   width: 10px !important; /* width of the dragger bar */
}
.mCSB_scrollTools .mCSB_draggerRail {
   background-color: #888888 !important; /* color of the rail */
   width: 10px !important; /* width of the rail for dragger bar */
}

Upvotes: -1

MineCMD
MineCMD

Reputation: 404

You simply can't without jQuery. Its because of bug #77790.

Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)

The only way is to use a jQuery plugin. I have links for you!
• http://plugins.jquery.com/custom-scrollbar/ - jQuery Custom Scrollbar
• http://jscrollpane.kelvinluck.com/ - jScrollPane
• https://www.google.ca/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=jquery%20scrollbar - Google search

Upvotes: 0

Anderson Mao
Anderson Mao

Reputation: 1131

Using jScrollPane will solve the scroll color cross browsers.

The usage is simple like: $("#someDivId").jScrollPane(); I tested under FireFox/IE/Chrome and got same UI result.

Also used jScrollBar, but it require several divs before use jScrollBar, instead of one div.

Upvotes: 0

SiN
SiN

Reputation: 3754

Unfortunately, this is not doable without custom scroll bars.

Upvotes: 1

Jamie Wong
Jamie Wong

Reputation: 18350

Not all browsers will let you control the styling for their scrollbars.

You can fake scroll bars with plugins like this, which claims to be cross-browser compatible:

http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/

Upvotes: 2

rahul
rahul

Reputation: 187050

You can't do this for the default scroll bar.

Use a custom scroll bar using javascript and CSS and lots of plugins will be available.

Upvotes: 1

Related Questions