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

There is, but only if you place the label after the input.

<input name="field" type="text" />
<label for="field">Label Here</label>

input:focus + label{
    color: red;
}

Now if you want the label to be placed before it, then you need to do some css styling with position absolute to place the label before the input field, then add some margin left on the input to move it to the right.

<div>
    <input name="field" type="text" />
    <label for="field">Label Here</label>
</div>

div{
   position: relative;
}
input{
   margin-left: 40px;
}
label{
   position:absolute;
   left:0;
}