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

Don’t Put pointer-events: none on Form Labels

Bruce Lawson has a tip of the day: avoid using pointer-events: none on form labels. The CSS property is meant to alter how elements handle click, tap, hover, and active states. On labels, however, it breaks the experience by shrinking their active hit target to something small and awkward to interact with. Lawson’s post includes working examples to illustrate the problem.

The bigger takeaway, though, is where this issue surfaced. It was traced back to an implementation of Material Design’s floating labels component. Lawson got help from pointer events expert Patrick Lauke, who spotted the culprit.

aha, now i remember when i first saw a few weeks ago – testing something based on material design for web https://t.co/YkEKXkU0To pic.twitter.com/31S74X1i4R

— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) February 5, 2021

This isn’t a knock on frameworks. It’s a reminder that front-end developers need to stay sharp, even about third-party code they didn’t write themselves. Awareness is the first line of defense.