Interactivity & pointer actions

Control cursors, clicks, selection, and more.

cursor

Change what the mouse looks like:

css
.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:

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

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

user-select

Control text selection:

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

appearance

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

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

accent-color

One-line color for checkbox/radio/progress:

css
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.