CODEWITHSUNDEEP
cssinternet-explorerscrollbar
Chun
Chun

Reputation: 2270

Customized Scroll Bar doesn't appear on Internet Explorer

I just created a customized scroll bar in CSS, in Google Chrome the scroll bar displays well and with the style I created for it, but in Internet explorer doesn't seem to be appearing at all... It's appearing the default scroll bar. How can I make this scroll bar appear on IE as well?

Here's a Jsfiddle example: http://jsfiddle.net/5Wne5/

::-webkit-scrollbar{
    width:6px;
    border-radius:10px;
} 
::-webkit-scrollbar-thumb{
    background-color:#B03C3F;
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
    background-color:#BF4649;
    border:1px solid #333333;
}
::-webkit-scrollbar-thumb:active{
    background-color:#A6393D;
    border:1px solid #333333;
} 
::-webkit-scrollbar-track{
    border:1px gray solid;
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px #1f1f1f;
}

Upvotes: 0

Views: 3130

Answers (2)

imbondbaby
imbondbaby

Reputation: 6411

-webkit- is only supported by Safari, Chrome, Opera 15+ as mentioned in the comments.

Therefore, your CSS will not work in IE but you could use this:

scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;

http://dottorocdn.com/images/help/page_spec/scrollbar.gif

Credits for the above code: http://codemug.com/html/custom-scrollbars-using-css/

Above code doesn't work on all browsers so to avoid that you could use jQuery.

There are several JS-Plugins to achieve the same look and feel for IE like in Webkit.

Upvotes: 2

Ming
Ming

Reputation: 4578

Your code says it all. -webkit- is only for Webkit browsers: Chrome, Safari, Opera 15+ are all Webkit. They may or may not support that code.

Internet Explorer is not a Webkit browser. That's why it will not work.

Firefox does not support scrollbar changing anymore.

Changing the style of an Operating System function is not recommended, that's why it's not part of W3C specification.

Code for IE:

scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;

Info: http://codemug.com/html/custom-scrollbars-using-css/

Good image (from above source) explaining what each property does:

Image explaining what each of the IE properties do to affect the scrollbar

Upvotes: 1

Related Questions