How do I show not-allowed on a disabled button?

button:disabled { cursor: not-allowed; }. For links and custom controls, target [aria-disabled='true'] instead.

Why does not-allowed not show with pointer-events: none?

pointer-events: none makes the element invisible to the mouse, so the browser uses the cursor of whatever is underneath. Put the cursor on a wrapper element.

Is a not-allowed cursor enough for accessibility?

No. Keyboard, touch and screen reader users never see it. Use the disabled attribute or aria-disabled, and make the disabled state visible.

cursor: not-allowed in CSS: for disabled controls

cursor: not-allowed; 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 not-allowed.

What it shows

Windows draws Unavailable (the No role, aero_unavail.cur), a circle with a diagonal slash. macOS shows Operation not allowed, the arrow with a no-entry badge.

Usage

When to use it

Use it for

Disabled buttons and inputs: button:disabled and [aria-disabled='true'].
Locked items in a list, such as a feature the visitor cannot use yet, next to text that says why.
Read-only fields where clicking does nothing.

Avoid it for

As the only sign that something is disabled. Lower contrast or a label has to say so too.
On elements with pointer-events: none. The cursor rule never applies there.

Code

Copy the snippet

CSS

button:disabled,
[aria-disabled="true"] { cursor: not-allowed; }

HTML

<button type="button" disabled>Export (sign-in needed)</button>

Support

Browsers and systems

Browser support for not-allowed
Browser	Support
Chrome	1
Edge	12
Firefox	1.5
Safari	3
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	No
Windows file	`aero_unavail.cur`
macOS	Operation not allowed

Watch out

Gotchas

pointer-events: none hides an element from the pointer, so its cursor never shows. To show not-allowed on a disabled link, keep pointer events on and block the click in JavaScript, or style a wrapper.
Browsers show the plain arrow on disabled buttons by default. You add not-allowed yourself.
aria-disabled elements stay focusable and clickable. Stop the click in your code as well as changing the cursor.

Free cursors

A custom not-allowed cursor

The same cursor from each of our packs, free under CC0. Move your mouse over one to try it, or open it for the .cur file, the PNG and the CSS.

FAQ

Questions

How do I show not-allowed on a disabled button?: button:disabled { cursor: not-allowed; }. For links and custom controls, target [aria-disabled='true'] instead.
Why does not-allowed not show with pointer-events: none?: pointer-events: none makes the element invisible to the mouse, so the browser uses the cursor of whatever is underneath. Put the cursor on a wrapper element.
Is a not-allowed cursor enough for accessibility?: No. Keyboard, touch and screen reader users never see it. Use the disabled attribute or aria-disabled, and make the disabled state visible.

More