scrollbar color change by css

hello guys

follow these css but unfortunately not support in mozilla firefox. If you want to support in all browsers follow this url , this example from using js and css both. Demo

<STYLE TYPE="text/css">
BODY {
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
.flexcroll {
width:400px;
height:200px;
overflow:scroll;
}
.flexcroll {
scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}

/* Let's get this party started */
.flexcroll::-webkit-scrollbar {
 width: 12px;
}

/* Track */
.flexcroll::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 -webkit-border-radius: 10px;
 border-radius: 10px;
}

/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
 -webkit-border-radius: 10px;
 border-radius: 10px;
 background: rgba(255, 0, 0, 0.8);
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
</STYLE>


<div class="flexcroll">
<p> The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!). </p>
<p>
<h5>The spirit of Rang De</h5>
The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour and exuberance and that is the significance we want our efforts to have for the people we reach out to.
</p>
<div>

Comments

Popular posts from this blog