Include ::-webkit-scrollbar-track
and ::-webkit-scrollbar-thumb
in your CSS as well.
.terms-and-conditions-division {
height : 420px;
border:1px solid #36454F;
overflow:auto;
}
.terms-and-conditions-division::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.terms-and-conditions-division::-webkit-scrollbar {
opacity: 0.7;
background: #384552;
width: 7px;
border-radius: 10px;
}
.terms-and-conditions-division::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
<div class="terms-and-conditions-division"><p class="medata-terms-and-conditions-data">Your custom content here...</p></div>