Labels trigger states for associated inputs
- Published at
- Updated at
- Reading time
- 1min
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.