light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

My friend Tom once more shared a very interesting link. The article by Roma Komarov describes that pseudo classes like :hover and :active of an input element will be also triggered when the associated label is e.g. hovered.

<label for="foo">Fooo</label>
<p>Some more content here</p>
<input id="foo">
#foo:hover {
  background: yellow;
}

The above example will color the input field yellow whenever you hover over the label. #mindblown

Check out the examples in article yourself, that's crazy stuff!

Edited: Today I read that click handlers on an input field are also triggered when you click an associated label.

Related Topics

Related Articles