CSS Custom Scroll Bar

How to make a custom vertical scroll bar with a little flare to make it stand out. This example was taken and slightly modified from CSS Tricks. CSS Tricks is one of the best CSS resources out there. https://css-tricks.com/


.scrollbar-table
{
    position: relative;
    height: 300px;
    overflow: auto;
    margin-bottom: 25px;

}

.force-overflow
{
    min-height: 400px;

}

#wrapper
{
    text-align: center;
    width: 400px;
    margin: auto;
}

/*
 *  SCROLL BAR STYLE
 */

#style-red::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 20px;
  background-color: #F5F5F5;
}

#style-red::-webkit-scrollbar
{
  width: 28px;
  background-color: #F5F5F5;
}

#style-red::-webkit-scrollbar-thumb
{
  border-radius: 20px;
  height: 50px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #f35c16;
}

HTML

<div class="scrollbar-table" id="style-red">

</div>