Don’t put pointer-events: none on form labels
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?”
second time i've seen this recently, so to save others a lengthy bug-hunt: if you have a properly associated <label>, but clicking/tapping it doesn't set focus to its correctly associated <input>/form element… check if for some reason the <label> has pointer-events:none in CSS
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) February 5, 2021
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:
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:
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
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!
(Last Updated on )
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
2 Responses to “ Don’t put pointer-events: none on form labels ”
You would add a pointer-event of none to the label when you float the label over the input and have it transition to a label above the input on focus of the input since for ADA it reads the label so you can’t remove it, and screen readers can’t read placeholder text. So it is a way to get “placeholder” text but then also see form labels when data fills the inputs.
point-event: none is designed to disable an element from pointer events, and, if I understand it correctly, this is the designed behavior and there is nothing wrong with it.
But, what I really want to know, why would someone or some libraries use that CSS like that ?