Web browser: Hide mouse cursor

Question

Is it possible to hide the mouse cursor in a web browser?

I've done this in Flash for a touch screen application, where a mouse cursor is distracting and unneeded. This time it's for a display screen that is non-interactive, so a mouse cursor is not needed.

My gut feeling is there's no easy way to achieve this in the web browser, only by use of a browser plug-in.

The browser in use is Firefox, so perhaps there's a plug-in that achieves this? Although it would be preferable to be able to do this via JavaScript/jQuery.

Answer 1

Just use a CSS rule:

* {
cursor: none;
}

Answer 2

Finding something that works across browsers is a pain.

The code below works on Chrome, IE, and Firefox. IE likes .cur files, Chrome likes the embedded png, and some browsers actually respect the none :)

#div {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
    url(images/blank.cur),
    none !important;
}

Answer 3

Try using the CSS:

  #elementID{
     cursor: none;
  }