Increase Scroll-bar width in Firefox - html / css

Question

I saw some questions about this, but those questions don't gave a solution that could work for me.

I want to increase the Scrollbar width of a div. The div size is huge, so a horizontal scrollbar has appeared. Now I want to increase the width of that scrollbar for more flexibility. So I search and found following link with code that works on Chrome browser. JSFiddle

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}

But this doesn't work on Firefox. I tried to replace the webkit with moz , didn't work either.

I also found that writting following code in userContent.css file of firefox can increase scrollbar width, but 1) I didn't find that userContent.css file in windows 7. 2) I can't go to users' home to tell them how to increase scrollbar width manually :P That's not a solution.

/* Increase width of VERTICAL SCROLLBAR */
scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { min-width: 35px !important; -moz-appearance: none !important; }

/* Increase width of HORIZONTAL SCROLLBAR */
scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { min-height: 35px !important; -moz-appearance: none !important; }

Is there any way so that I can increase scrollbar width in both Chrome & Firefox?? (Forget IE) I can use html css javascript & jquery solutions, but no scrollbar plugin. I've to convert the native scrollbar from browsers.

But "Everything is possible in this world" WITHOUT EVEN JQUERY PLUGINS — Pratik Joshi, Mar 07 '14 at 07:27
You mean in Chrome EVERYTHING IS ALL RIGHT but not in Firefox?,So you want the same thing in Firefox also ? — Pratik Joshi, Mar 07 '14 at 07:29
Duplicate : http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox/6165489#6165489 — airi, Mar 07 '14 at 07:31
@airi Which part of this line you didn't understand? "I saw some questions about this, but those questions don't gave a solution that could work for me." — AtanuCSE, Mar 07 '14 at 07:36
@AtanuCSE : btw this is the answer you seek : Unfortunately Firefox still doesnt support custom scrollbars. — airi, Mar 07 '14 at 07:51

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

check the below link. check the philipp comment mentioned in the site.

https://support.mozilla.org/en-US/questions/979461 also check the bugZilla

https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Dont forget to check the comment #134

Custom CSS Scrollbar for Firefox

edited May 23 '17 at 12:28

Community

1
1

answered Mar 07 '14 at 07:30

threeleggedrabbit

1,722
2
28
60

score 0 · Accepted Answer · answered Mar 07 '14 at 07:32

Although chrome supports changing the scrollbar width using -webkit prefixes none of the other browsers do. Some allow the scrollbar to be styled so the colours are different but as far as I am aware you cannot change the width.

Instead, if it is absolutely essential you change the scrollbar, you will need to use a JavaScript solution.

There are many solutions out there - too many to document in an answer on SO - but here are a few links to get you started:

score 0 · Answer 3 · answered Mar 07 '14 at 08:00

0

Although you cant customs the css for FF .. you can use this plugin : http://manos.malihu.gr/tuts/m-custom-scrollbar-plugin.zip

answered Mar 07 '14 at 08:00

airi

585
5
21

Increase Scroll-bar width in Firefox - html / css

3 Answers3

Linked