Disabling iFrames With CSS

September 2, 2021 - 1 minute read

While you can’t technically disable HTML iFrames, you can prevent user interaction and make them appear read-only.

In fact, you can do it in just two lines of code:

iframe {
    overflow: hidden;
    pointer-events: none;
}

But wait!

That overflow: hidden declaration, which removes the iFrame’s scrollbars, only works in Firefox.

So to ensure compatibility with all other modern browsers, you must set the scrolling attribute to no directly on your <iframe> tag:

<iframe src="/example.html" title="Example" scrolling="no">

I think it’s important to note that the scrolling attribute for <iframe> tags was actually deprecated in HTML5. However, most major browsers still support it.

Oh, and if all else fails, try adding the !important rule to your CSS declarations:

iframe {
    overflow: hidden !important;
    pointer-events: none !important;
}

Conclusion

Well, this is probably my shortest post yet. But personally, I definitely prefer concise and to-the-point solutions!

The ability to make iFrames “read-only” is quite practical, and I’ve saved this snippet for whenever I’m trying to generate a preview image of a page. I hope it helps you out too.

Thanks for reading.

Link to this section Conclusion

Conclusion