CSS cursor on input elements

Text inputs default to cursor: text. Disabled inputs default to cursor: default. Override only when necessary.

Syntax

input[type='checkbox'] { cursor: pointer; }

When to use

Add pointer to checkboxes, radios, and submit buttons. Add not-allowed to disabled inputs.

Keyword reference

The CSS property is cursor. The value form covered on this page is input { cursor: ... }. The full grammar accepts a comma-separated list of url() sources followed by a single required keyword fallback. Browsers walk the list left-to-right, use the first source they can render, and fall back to the keyword if all url() sources fail.

Browser support notes

  • Chrome / Edge (Chromium): accepts cursor images up to 128×128. Falls back gracefully on broken URLs.
  • Firefox: caps cursor images at 32×32 unless DPI scaling is in play. Always ship a 32×32 variant for Firefox compatibility.
  • Safari: historically picky about URL-only fallback chains; always include a CSS keyword fallback at the end.
  • Mobile Safari / Chrome on Android: no cursor at all. Wrap custom cursor rules in @media (pointer: fine) to avoid wasted bytes.

Related cursor properties

From keyword to a real cursor pack

If you have decided which CSS cursor value you want and now need a cursor pack to ship behind it, browse the collections page or pick a free CC0 set from the community assets page. The website-cursor tutorial walks through the full deploy.