I have come across similar questions on this topic, but none of the solutions provided seem to work for my specific case.
My goal is to adjust the width of the scrollbar within a large div element. As the size of the div is substantial, a horizontal scrollbar has been generated. I am looking to increase the width of this scrollbar to enhance flexibility. During my search, I came across a helpful resource containing code that successfully modified the scrollbar width in the Chrome browser. JSFiddle
::-webkit-scrollbar {
width: 2em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
Unfortunately, this code does not seem to work in Firefox. I attempted to substitute 'webkit' with 'moz', but this adjustment also proved ineffective.
I also discovered that adding the following code to the userContent.css file in Firefox can achieve the desired scrollbar width increase. However, two obstacles prevent me from utilizing this method effectively: 1) The lack of a userContent.css file in Windows 7. 2) Inconvenience associated with manually instructing users on how to modify scrollbar width :P This solution is not viable.
/* 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 a method available to modify the scrollbar width in both Chrome and Firefox? (Let's forget about IE) I can utilize html css javascript & jquery solutions, but would prefer to avoid scrollbar plugins and instead work with native browser scrollbars.