Custom design of scroll bar for Fire Fox and IE

Question

I have coded for scroll bar design in CSS using Web-kit that working great on chrome and safari but I need same design for Fire Fox and IE. IE scrollbar width does not change. I have searched on Google but I did not find the proper solution.

I found following code but didn't work

@-moz-document url-prefix(http://),url-prefix(https://) {
 scrollbar {
 -moz-appearance: none !important;
 background: rgb(0,255,0) !important;
 }
 thumb,scrollbarbutton {
 -moz-appearance: none !important;
 background-color: rgb(0,0,255) !important;
 }
 thumb:hover,scrollbarbutton:hover {
 -moz-appearance: none !important;
 background-color: rgb(255,0,0) !important;
 }
 scrollbarbutton {
 display: none !important;
 }
 scrollbar[orient="vertical"] {
 min-width: 15px !important;
 }
}

I also want to change width of scroll bar for IE how can I do

I don't want to use JQuery or its plugin if there is a way doing this in CSS please tell I would really appreciate.

are you looking for this? http://stackoverflow.com/a/25480648/1107638 — Mox Shah, Mar 05 '15 at 11:59
There is a reply here: http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox — Ioan-Radu Tanasescu, Mar 05 '15 at 12:01
It's long been stated that you don't mess with the user's interface, such as the scrollbar, and I agree. — Rob, Mar 05 '15 at 12:01
I did not found such helpful answer as i told in my question — Syed Anwar Shah Tarn, Mar 05 '15 at 12:04
and these replies suggested the use of jquery plugin where I don't want to use that i need only css and these replies are of 2012 and this is era of 2015 there should be change technology is advanced — Syed Anwar Shah Tarn, Mar 05 '15 at 12:06

score 0 · Answer 1 · answered Mar 05 '15 at 12:05

0

There is no equivalent to ::-webkit-scrollbar in firefox. before few days back i was searching for the same problem then i came to know that There is no solution for this and this bug is already registered in https://bugzilla.mozilla.org

answered Mar 05 '15 at 12:05

Shridhar

339
2
15

could i change the width of scroll bar for IE – Syed Anwar Shah Tarn Mar 05 '15 at 12:12
ya you can change for IE. ::-webkit-scrollbar { width: 0px; /* for hiding vertical scrollbars */ or width: 10px; /*for showing scrollbar*/ } – Shridhar Mar 05 '15 at 12:15
nup that is not working I used ::-webkit-scrollbar it works for chrome not for IE and I have IE 11 – Syed Anwar Shah Tarn Mar 05 '15 at 12:17
Which version of IE you are using? – Shridhar Mar 05 '15 at 12:24
sorry yar i think it will also not works in IE. check out this https://css-tricks.com/almanac/properties/s/scrollbar/ now i dont have IE to test. – Shridhar Mar 05 '15 at 12:28
i use IE 11 you can check at the end of link they have shown ::-webkit is not supported on IE and fire fox – Syed Anwar Shah Tarn Mar 05 '15 at 12:51
ya based on that only i told it will not work in my above comment. – Shridhar Mar 05 '15 at 12:53

Custom design of scroll bar for Fire Fox and IE

1 Answers1