Interactivity & pointer actions

Interactivity & Pointer gestures

Control cursors, clicks, selection, and more.

cursor

Change what the mouse looks like:

.links { cursor: pointer; }
.drag { cursor: grab; / grab }
spinner { cursor: progress; cursor: wait; }
.disabled { cursor: not-allowed; }

pointer-events

Decide if an element responds to clicks:

.decorated {
  pointer-events: none;   /* clicks pass through */
}

None lets clicks pass "through" to stuff beneath. Great for overlays.

user-select

Control text selection:

button {
  user-select: none;      /* don't accidentally select text while clicking */
}

appearance

Hide OS-native widget styling (checkbox arrow, selects):

select {
  appearance: none;   /* now style your own */
}

accent-color

One-line color for checkbox/radio/progress:

input[type="checkbox"] {
  accent-color: #04aa6d;
}

TL;DR

• cursor: pointer / wait / not-allowed / grab.
• pointer-events: none lets clicks pass through.
• user-select: none stops accidental text selection.
• appearance: none removes native form styling.
• accent-color colors native form controls.