Labels trigger states for associated inputs (#tilPost)

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.
<labe…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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.


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2017-06-11T22:00:00+00:00) Labels trigger states for associated inputs (#tilPost). Retrieved from https://www.scien.cx/2017/06/11/labels-trigger-states-for-associated-inputs-tilpost/

MLA
" » Labels trigger states for associated inputs (#tilPost)." Stefan Judis | Sciencx - Sunday June 11, 2017, https://www.scien.cx/2017/06/11/labels-trigger-states-for-associated-inputs-tilpost/
HARVARD
Stefan Judis | Sciencx Sunday June 11, 2017 » Labels trigger states for associated inputs (#tilPost)., viewed ,<https://www.scien.cx/2017/06/11/labels-trigger-states-for-associated-inputs-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » Labels trigger states for associated inputs (#tilPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2017/06/11/labels-trigger-states-for-associated-inputs-tilpost/
CHICAGO
" » Labels trigger states for associated inputs (#tilPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2017/06/11/labels-trigger-states-for-associated-inputs-tilpost/
IEEE
" » Labels trigger states for associated inputs (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2017/06/11/labels-trigger-states-for-associated-inputs-tilpost/. [Accessed: ]
rf:citation
» Labels trigger states for associated inputs (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2017/06/11/labels-trigger-states-for-associated-inputs-tilpost/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.