Is cursor: none bad for accessibility?

It can be. Hiding the pointer throws away the visitor's own pointer size and colour settings. Keep it scoped, make the replacement follow exactly, restore the pointer on fields, and skip the effect under prefers-reduced-motion if the replacement animates.

How do I hide the cursor after the mouse stops moving?

Add a class that sets cursor: none after a short timeout with no mousemove, and remove it on the next move. Video players do exactly this.

Does cursor: none do anything on phones?

No. A touchscreen has no pointer to hide. An iPad with a trackpad keeps its round pointer, and MDN's data lists none as unsupported there.

General

cursor: none in CSS: hiding the pointer safely

none hides the mouse pointer over the element. It is the base of every custom-cursor effect, and also the quickest way to leave a visitor with no visible pointer.

cursor: none; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for none.

What it shows

Nothing. The system pointer disappears while it is over the element, on Windows, macOS and Linux. The pointer still exists, clicks still land, and it comes back as soon as it leaves the element.

Usage

When to use it

Use it for

Under a JavaScript cursor replacement (a dot, a ring, a label) that follows the pointer exactly, and only on devices with a mouse or trackpad.
Video players and slideshows, after a few seconds without movement. Bring the cursor back on the next move.
Games and drawing canvases that draw their own crosshair or brush outline at the exact pointer position.
Keep it to one section, such as a hero or a gallery, rather than the whole page.

Avoid it for

Over form fields, text people will select, or anything that needs precise clicks. Restore auto or text there.
When your replacement lags behind the pointer or only appears once JavaScript loads. People lose track of where they are clicking.
As a page-wide default. Visitors who enlarged or recoloured their system pointer lose it.

Code

Copy the snippet

CSS

@media (hover: hover) and (pointer: fine) {
  .stage { cursor: none; }
}

HTML

<div class="stage">
  The pointer disappears in here. Something else has to show where it is.
</div>

Support

Browsers and systems

Browser support for none
Browser	Support
Chrome	5
Edge	12
Firefox	3
Safari	5
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	none
Windows file	`none`
macOS	Hidden

Watch out

Gotchas

Add the cursor: none rule from JavaScript, for example as a class on html, so the native pointer stays if the script fails.
Wrap the rule in @media (hover: hover) and (pointer: fine) so touch devices are left alone.
Browsers may ignore cursor over scrollbars and native controls, so a hidden pointer can reappear over a scrollbar.
Your replacement does not inherit the visitor's pointer size or colour. People who rely on a large system pointer lose it.

FAQ

Questions

Is cursor: none bad for accessibility?: It can be. Hiding the pointer throws away the visitor's own pointer size and colour settings. Keep it scoped, make the replacement follow exactly, restore the pointer on fields, and skip the effect under prefers-reduced-motion if the replacement animates.
How do I hide the cursor after the mouse stops moving?: Add a class that sets cursor: none after a short timeout with no mousemove, and remove it on the next move. Video players do exactly this.
Does cursor: none do anything on phones?: No. A touchscreen has no pointer to hide. An iPad with a trackpad keeps its round pointer, and MDN's data lists none as unsupported there.