how can I change my default scrollbar to custom for Object tag?

Question

I just want to set a new custom scrollbar for my pdf viewer (which i show with in object tag) but the custom scroll css cannot affect the object tag, why its happening ? for all other tags the custom scroll css is affected and i have no problem with that but only for object tag i need a custom scrollbar.

I tried the custom scrollbar css code but its not working for object tag but for all other works fine.

 var openFile = function(event) { var input = event.target; var reader = new FileReader(); reader.onload = function() { var dataURL = reader.result; var output = document.getElementById('output'); output.data = dataURL; }; reader.readAsDataURL(input.files[0]); }; 

 <input type='file' onchange='openFile(event)'><br> <object id='output'></object> 

I just want a custom scroll design for that pdf viewer object.

Answer 1

Adding display: block; to your object CSS solved the issue on my side.

My example is a little different, I added some content because, I have no output. But your syntax is correct and the scrollbar will show.

 var openFile = function(event) { var input = event.target; var reader = new FileReader(); reader.onload = function() { var dataURL = reader.result; var output = document.getElementById('output'); output.data = dataURL; }; reader.readAsDataURL(input.files[0]); }; 

 object { height: 300px; width: 500px; display: block; overflow: scroll; } object::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #F5F5F5; } object::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } object::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #D62929; } 

 <input type='file' onchange='openFile(event)'><br> <object id='output'> <div class="example-content">example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example</div> </object> 

Answer 2

::-webkit-scrollbar {
    width: 6px;
    height: 20px;
    padding: 2px 2px 2px 0px;
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-button {
    background: #ffffff;
}

::-webkit-scrollbar-track-piece {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: var(--light-grey1);
    border-radius: 8px;
    border: 2px solid #fff;
}