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

default-2

The other day I was tearing my hair out wondering why an HTML form I was debugging wouldn’t focus on the form field when I was tapping on the associated label. The HTML was fine:

<label for="squonk">What's your name, ugly?</label>
<input id="squonk">

I asked my good chum Pat “Pattypoo” Lauke for help, and without even looking at the form or the code, he asked “Does it turn off pointer events in the CSS?”

Lo and FFS, there it was! label {pointer-events:none;}! This daft bit of CSS breaks the browser default behaviour of an associated label, and makes the hit target smaller than it would otherwise be. Try clicking in the “What’s your name, ugly?” text:

Try me, I’m good

Try me, I’m crap

I’m jolly lucky to have the editor of the Pointer Events spec as my chum. But why would anyone ever do this? (That line of CSS, I mean, not edit a W3C spec; you do the editing for the sex and the glory.)

Once again, Pat whipped out his code ouija board:

And, yes—the presentation had originally been Material Design floating labels, and this line of CSS had been cargo-culted into the new design. So don’t disable pointer events on forms—and, while you’re at it, Stop using Material Design text fields!

Bruce Lawson’s personal site is copyright © Bruce Lawson 2003-2021. Much (but not all) is available under a creative commons license that allows non-commercial attributed distribution. It’s polite to ask me first, though.

All opinions contained herein are mine (and are thus incontrovertibly correct) and do not represent the opinions of my employers. (Comments are copyright their authors, not written by me, and are therefore probably the ramblings of mad people.)

I’m available for training, public speaking, or CTOing your next development project. Get in touch!


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
Critical Vulnerability Patched in WooCommerce Upload Files

https://www.wordfence.com/wp-content/uploads/2021/03/critical-vulnerability-patched-in-woocommerce-upload-files-1024×536.jpg On December 29, 2020, the Wordfence Threat Intelligence team was alerted to a potential 0-day vulnerability in the WooCommerce Upload Files plugin, an add-on

Read More »