Bruce Lawson’s personal site

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

(Last Updated on )

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!

The clown in Steven King's IT down a storm drain, saying 'We all float labels down here Georgie"

2 Responses to “ Don’t put pointer-events: none on form labels ”

Comment by undefined

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 ?

Comment by Wes

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.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.