-1

[iframe scrollbar width size change](https://i.stack.imgur.com/zyr4y.png)

i tried with this style but not working

/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
Vijay Patil
  • 1
  • please checkout your broweser compatablity here https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#browser_compatibility – Kesavan R Feb 08 '23 at 10:10
  • Tried this styling _where_? The scrollbar belongs to the document that was loaded inside of the iframe, not to the `iframe` _element_ that is part of your main document. – CBroe Feb 08 '23 at 10:10
  • you need to add your iframe class or id in front of your all css like: .your_class_name::-webkit-scrollbar { width: 10px; } – Md. Delowar Hossen Feb 08 '23 at 10:11
  • Please provide enough code so others can better understand or reproduce the problem. – Community Feb 08 '23 at 14:02

1 Answers1

0

iframe content does not inherit styles from the parent document. In other words, those styles will only be applied to scrollbars on your page, not the scrollbars of any nested documents (unless those pages have the same styles).

However, if you're embedding a website from the same origin in an iframe, and you want to override its content's styles, then you can do something similar to what's suggested in this answer.

Dennis Kats
  • 2,085
  • 1
  • 7
  • 16