I'm attempting to customize a scrollbar using CSS with the -webkit-scrollbar property. Below is the code I am using:
index.html
<html>
<head>
<style>
object {
overflow: scroll;
width: 300px;
height: 300px;
border: green solid;
}
object::-webkit-scrollbar {
width: 20px;
}
object::-webkit-scrollbar-track {
background-color: transparent;
}
object::-webkit-scrollbar-thumb {
background-color: #f50000;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
object::-webkit-scrollbar-thumb:hover {
background-color: #1100ff;
}
</style>
</head>
<body>
<div id="_details">
<object type="text/html" data="_details.html"></object>
</div>
</body>
</html>
_details.html
<h1>content</h1>
<br>
<h1>content</h1>
<br>
<h1>content</h1>
<br>
<h1>content</h1>
Despite implementing the custom styles, when viewing index.html, the default scrollbar still appears.
https://i.sstatic.net/q9gkg.png
Is there a method to ensure that the object tag displays the customized scrollbar as intended? Thank you!