Is it possible to hide the cursor in a webpage using CSS or Javascript?

Is it possible to hide the cursor in a webpage using CSS or Javascript?

I want to hide the cursor when showing a webpage that is meant to display information in a building hall. It doesn’t have to be interactive at all. I tried with the cursor property and a transparent cursor image but I didn’t make it work.
Does anybody know if this can be done? I suppose this can be thought as a security threat for a user that can’t know where he is clicking on, so I’m not very optimistic… Thank you!

Solutions/Answers:

Solution 1:

With CSS:

selector { cursor: none; }

An example:

<div class="nocursor">
 <!-- some stuff -->
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>

To set this on an element in Javascript, you can use the style property:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

If you want to set this on the whole body:

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

Make sure you really want to hide the cursor, though. It can really annoy people.

Solution 2:

Pointer Lock API

While the cursor: none CSS solution is definitely a solid and easy workaround, if your actual goal is to remove the default cursor while your web application is being used, or implement your own interpretation of raw mouse movement (for FPS games, for example), you might want to consider using the Pointer Lock API instead.

You can use requestPointerLock on an element to remove the cursor, and redirect all mousemove events to that element (which you may or may not handle):

document.body.requestPointerLock();

To release the lock, you can use exitPointerLock:

document.exitPointerLock();

Additional notes

No cursor, for real

This is a very powerful API call. It not only renders your cursor invisible, but it actually removes your operating system’s native cursor. You won’t be able to select text, or do anything with your mouse (except listening to some mouse events in your code) until the pointer lock is released (either by using exitPointerLock or pressing ESC in some browsers).

That is, you cannot leave the window with your cursor for it to show again, as there is no cursor.

Restrictions

As mentioned above, this is a very powerful API call, and is thus only allowed to be made in response to some direct user-interaction on the web, such as a click; for example:

document.addEventListener("click", function () {
    document.body.requestPointerLock();
});

Also, requestPointerLock won’t work from a sandboxed iframe unless the allow-pointer-lock permission is set.

User-notifications

Some browsers will prompt the user for a confirmation before the lock is engaged, some will simply display a message. This means pointer lock might not activate right away after the call. However, the actual activation of pointer locking can be listened to by listening to the pointerchange event on the element on which requestPointerLock was called:

document.body.addEventListener("pointerlockchange", function () {
    if (document.pointerLockElement === document.body) {
        // Pointer is now locked to <body>.
    }
});

Most browsers will only display the message once, but Firefox will occasionally spam the message on every single call. AFAIK, this can only be worked around by user-settings, see Disable pointer-lock notification in Firefox.

Listening to raw mouse movement

The Pointer Lock API not only removes the mouse, but instead redirects raw mouse movement data to the element requestPointerLock was called on. This can be listened to simply by using the mousemove event, then accessing the movementX and movementY properties on the event object:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});

Solution 3:

The other answers in action

.nocursor {
  cursor: none;
  
  padding: 2em;
  border: 1px solid #000;
}
<div class="nocursor">
  Bye cursor!
</div>

Solution 4:

I did it with transparent *.cur 1px to 1px, but it looks like small dot. 🙁 I think it’s the best cross-browser thing that I can do.
CSS2.1 has no value ‘none’ for ‘cursor’ property – it was added in CSS3. Thats why it’s workable not everywhere.

Solution 5:

If you want to do it in CSS:

#ID { cursor: none !important; }

Solution 6:

For whole html document try this

html * {cursor:none}

Or if some css overwrite your cursor: none use !important

html * {cursor:none!important}