toggling styles on label (active/focus) for input field with css only

Question

Wondering whether if there is a css-only way to perform to toggle styles on the corresponding label on input\'s focus. So far I have:

    $(         


        

Answer 1

Try this way:- Place your label after input and float it left. And apply siblings.

Html

    
    Email

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

Demo

This is a hack to get the adjacent sibling selector work as it applies only on the following element and not the preceding one. ~ will select all the adjascent siblings after this element. So if you are having different .row for each section of inputs then use +.