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

If you are willing to switch elements, than here you go

Demo

    
    E-Mail

label {
    float: left;
    margin-right: 5px;
}

input[type=text]:focus + label {
    color: red;
}

Explanation: We are using + adjacent selector here, so when the textbox is focused, we select the label tag and apply color red

Note: Don't forget to clear floats ;)