Direct link to the article Don’t put pointer-events: none on form labels

Don’t put pointer-events: none on form labels

Direct Link

Bruce Lawson with the tip of the day, warning against the use of pointer-events: none on forms labels. We know that pointer-events is used to change how elements respond to click, tap, hover, and active states. But it apparently borks …

Avatar of Geoff Graham
Shared by Geoff Graham on
Direct link to the article Interaction Media Features and Their Potential (for Incorrect Assumptions)

Interaction Media Features and Their Potential (for Incorrect Assumptions)

The Media Queries Level 4 Interaction Media Features — pointer, hover, any-pointer and any-hover — are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user’s input device.
Avatar of Patrick H. Lauke
Patrick H. Lauke on (Updated on )

pointer-events

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

.avoid-clicks {
  pointer-events: none;
}

While the pointer-events property …

Avatar of Chris Coyier
Chris Coyier on (Updated on )