Post

I somehow only just realised that if you hover a label it matches `:hover` on the associated form control... Is this common knowledge? I feel like it's probably one of those things that I actually already did know and have just forgotten.

6/8/26, 1:55 pm1 repost14 likes

khanglol

@khanglol.bsky.social

6 Aug

Wait, this is so interesting thanks to <button> being a form control. Some behavior only possible with :has(:has()) may be possible using this... wow! <object> & <fieldset> don't seem to work with this even though it is a "labelable" form control according to MDN

khanglol

@khanglol.bsky.social

6 Aug

This works even if <button> has `display: contents;` Wow!

Luke

@lukewarlow.dev

6 Aug

The list of labelable elements according to the html spec is button, input (if the type attribute is not in the Hidden state), meter, output, progress, select, textarea, and form-associated custom elements. html.spec.whatwg.org/multipage/fo...

html.spec.whatwg.orgHTML Standard

khanglol

@khanglol.bsky.social

6 Aug

Huh, never realized that since I tend to nest controls inside their <label>. Very, very interesting. I wonder how you can abuse this since <button> is a form control😮

Joe Dakroub

@dakroub.co

7 Aug

I literally learn new things about HTML daily and have been honing my skills with it over 25 years. Thank you for this insight!

Luke

@lukewarlow.dev

6 Aug

Interestingly it doesn't forward mouse events like mouseover (other than click "obviously"). But it does apply `:active` and `:hover` (interestingly it doesn't do this for :focus)