html - How to make a custom scroll bars in IE?

Question

I have this nice scrollbar which is working in Chrome as well as in Safari latest versions. Is it possible to create the same kind of scrollbar for IE9+ using pure CSS?

CSS:

.scrollbar
{
    float: left;
    height: 300px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.scrollbar-active
{
    min-height: 450px;
}

#scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#scroll::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#scroll::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}

HTML:

<div class="scrollbar" id="scroll">
    <div class="scrollbar-active"></div>
</div>

DEMO: https://jsfiddle.net/7gmut6w3/2/

Answer 1

These are the CSS properties you can use to adjust the style of IE scrollbars:

body{
  scrollbar-base-color: #000;
  scrollbar-face-color: #000;
  scrollbar-3dlight-color: #000;
  scrollbar-highlight-color: #000;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #000;
  scrollbar-dark-shadow-color: #000;
}

More information can be found here.

WORD OF CAUTION - Adjusting a native element of a web browser (like a scrollbar) can introduce all sorts of weird edge cases and user experience issues. Be careful with any adjustments you make, making sure the added benefit of custom scrollbars outweighs the issues it will present.