Search code examples
cssiframemouse-cursor

Hiding the user's cursor over iframe. Possible?

I want the user's cursor to be hidden over an iframe.

iframe {
  cursor: none;
}

However it doesn't do the trick.

Do I need to use JavaScript? Can JavaScript even do it? What's the solution?

Solution

  • Unfortunately, I had to resort to js for this one.

    var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'none';

    This won't work cross-domain, but I don't think you should be using something like that cross domain anyway.

    Assuming this is all on your own domain, another good js solution would be to inject a stylesheet into the iframe, changing it's own css to cursor: none on the html or body. I have used a similar strategy for my content manager - I load the real page right into the admin panel, inject some elements and a stylesheet into it, and then have admin features available right on the site - loaded in the iframe.