Cursor, Pointer Events & User Select in CSS
From the CSS cheat sheet · Display & Visibility · verified Jul 2026
Cursor, Pointer Events & User Select
Control mouse cursor appearance and element interactivity
css
cursor: pointer; /* Clickable hand */
cursor: not-allowed; /* Disabled state */
cursor: grab; /* Draggable */
pointer-events: none; /* Click-through */
user-select: none; /* Prevent text selection */💡 pointer-events: none makes an element click-through — clicks pass to elements behind it
⚡ cursor: grab + cursor: grabbing on :active gives proper drag feedback
📌 user-select: none on buttons and UI chrome prevents accidental text selection
🟢 Combine opacity: 0.5 + cursor: not-allowed + pointer-events: none for disabled states
cursorpointer-eventsuser-select