Labels trigger states for associated inputs

1 min read

This post is part of my Today I learned series in which I share all my learnings regarding web development.

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.

Topics