Cursor selects a pointer image or keyword when a pointing device is over an element. It describes an affordance; it does not turn a static element into a button or make a disabled action safe.
Make this comfortable
CSS cursor: match the pointer cue to a real action
When to use it
A draggable column-width handle in an audit table may use col-resize because that matches its actual pointer interaction. The resize operation must exist, the handle needs a usable hit area, and a keyboard route should be considered if resizing is part of the task. Do not put cursor pointer on every decorative card just to suggest interactivity. Links and buttons already have semantic behavior that survives touch and keyboard use; a cursor cannot supply it. The sample targets only the real resize grip and leaves ordinary table cells untouched. Test the hit area at high zoom and near a horizontal scroll edge, where pointer precision becomes harder.
.audit-table__resize-grip { cursor: col-resize; inline-size: .75rem; touch-action: none; }
.audit-table__resize-grip:focus-visible { outline: 2px solid #175b44; }Cost and verification
Changing a cursor is almost free to render, but misleading cues waste user time and can conceal missing behavior. Touch devices may never show the cursor, so the visual design and accessible name must explain the control without it. Touch-action none can change gesture behavior, so scope it tightly and verify the surrounding table still scrolls. For a genuinely disabled native button, use the disabled attribute and a readable visual state; a not-allowed cursor alone does not block activation. Keep any custom cursor asset small if one is necessary.
Common Mistakes
- Do not assign pointer to a static card with no action.
- Do not simulate disabled state with a cursor keyword.
- Do not suppress touch scrolling across the entire table to support one handle.
Connected lessons
css
reference
web