CSS pointer-events: remove decorative hit targets carefully

Last updated: 5 Oct 20265 min read

tutorial

Pointer-events controls whether an element can be selected as the target of pointer input. The value none removes that element from ordinary pointer hit testing; it is not a disabled-state mechanism.

When to use it

A search field contains a decorative magnifier drawn over its leading edge. The icon has no action, so pointer-events none lets a click in that region reach the input. Keep the input itself interactive and retain its visible label. Applying none to a button to simulate disabled behavior is unsafe: keyboard focus may still reach it, event listeners and descendants can behave differently, and the form's actual disabled contract remains unchanged. The sample scopes the rule to the decoration only. Test touch selection, mouse clicks near the icon, and keyboard tab order. If a real clear-search control is added later, it needs its own button and hit target; do not inherit this decorative rule.

.search-field { position: relative; }
.search-field__decoration { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); pointer-events: none; }

Cost and verification

Hit testing itself is inexpensive. The cost is the interaction mismatch when visual affordances and actual targets diverge. A parent set to none may still receive events during capture or bubbling from a targetable descendant, so do not use this CSS as an authorization or event-suppression boundary. Native disabled attributes and application state decide whether an action is allowed. Inspect the target with browser hit-testing tools if clicks are lost. Keep decorative overlays small enough that they do not obscure entered text or the focus outline.

Common Mistakes

Do not use pointer-events none to implement authorization or disabled state.
Do not put the rule on the input or its real action button.
Do not assume event listeners on an ancestor stop running.

Connected lessons

Further rendering decisions

CSS touch-action: scope gesture control to the interactive surface

css

reference

web