pointer-events
Controlling pointer hit testing independently of keyboard access.
Overview
| Class | Declarations |
|---|---|
pointer-events:auto | pointer-events: auto;
|
pointer-events:visiblePainted | pointer-events: visiblePainted;
|
pointer-events:visibleFill | pointer-events: visibleFill;
|
pointer-events:visibleStroke | pointer-events: visibleStroke;
|
pointer-events:visible | pointer-events: visible;
|
pointer-events:painted | pointer-events: painted;
|
pointer-events:fill | pointer-events: fill;
|
pointer-events:stroke | pointer-events: stroke;
|
pointer-events:all | pointer-events: all;
|
pointer-events:<value> | pointer-events: <value>;
|
pointer-events:none | pointer-events: none;
|
pointer-events controls pointer hit testing. It does not remove an element from the tab order or disable keyboard activation. Use auto and none for HTML hit testing; values such as fill, stroke, and visiblePainted describe SVG geometry.
Examples
Let clicks pass through an overlay
Compare the same transparent overlay with pointer-events:none and pointer-events:auto. Click the checkbox underneath each overlay.
<!-- None · reaches the checkbox --><div class="rel px-lg pb-lg pt-xl b:1px|solid|var(--color-line-base) r-sm"> <label class="flex items-center gap-sm"> <input type="checkbox"> Snap to grid </label> <div id="target" aria-hidden="true" class="abs inset:0 b:1px|dashed|var(--color-violet) r-sm untouchable"> <span class="abs right-xs top-xs font-xs text-violet">Overlay</span> </div></div><!-- Auto · overlay intercepts the pointer --><div class="rel px-lg pb-lg pt-xl b:1px|solid|var(--color-line-base) r-sm"> <label class="flex items-center gap-sm"> <input type="checkbox"> Snap to grid </label> <div id="target" aria-hidden="true" class="abs inset:0 b:1px|dashed|var(--color-violet) r-sm pointer-events:auto"> <span class="abs right-xs top-xs font-xs text-violet">Overlay</span> </div></div>Generated CSS
@layer utilities { .pointer-events\:none { pointer-events: none }}Both checkboxes remain reachable with Tab and Space. The overlay has no action; only the first lets pointer input reach the native control underneath.
Use the untouchable alias
untouchable emits pointer-events:none. Here the decorative SVG is skipped during hit testing and the button receives the pointer instead.
<form class="grid justify-items:start gap-md"> <label class="grid gap-xs w:240px max-w:100%"> Project name <input type="text" value="Canvas" class="w:100%"> </label> <button type="reset" class="inline-flex items-center gap-sm"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" id="target" class="untouchable"> <path d="M4 8a6 6 0 1 1 0 5 M4 3v5h5" /> </svg> <span>Reset name</span> </button></form>Edit the name, then click directly on the reset icon. The native reset restores the field. aria-hidden="true" separately excludes the decoration from the button’s accessible name.
Restore pointer events on a child
The property is inherited. A child with pointer-events:auto can receive pointer input inside a parent set to none.
<div class="p-md b:1px|dashed|var(--color-violet) r-sm untouchable"> <p class="font-xs text-muted">Parent ignores direct pointer targeting</p> <label id="target" class="flex items-center gap-sm pointer-events:auto"> <input type="checkbox"> Enable snapping </label></div>The child’s events can still pass through the parent during event propagation. Pointer exclusion on a parent is not an event-listener firewall.
Apply conditionally
Resize the real viewport. The overlay intercepts pointer input below sm and lets it pass through at sm.
<!-- Auto → none at sm --><div class="rel px-lg pb-lg pt-xl b:1px|solid|var(--color-line-base) r-sm"> <label class="flex items-center gap-sm"> <input type="checkbox"> Snap to grid </label> <div id="target" aria-hidden="true" class="abs inset:0 b:1px|dashed|var(--color-violet) r-sm pointer-events:auto untouchable@screen@sm"> <span class="abs right-xs top-xs font-xs text-violet">Overlay</span> </div></div>Use Tab and Space to toggle the checkbox at either width. The conditional rule changes pointer targeting only; it is not a disabled state.