On input focus change color of label. How?

Question

On input focus I want to change the color of the label element. How can I achieve this in less?

.control-label{
      color: @gray-light;
}
.co         


        

Answer 1

One solution would be to move the label below the input in the DOM but position them absolutely (to the parent) so the label looks to be above the input field:

  
  Text

In CSS move the label to the top, the input to the bottom:

label {
  position: absolute
  top: 0
}

input {
  position: absolute
  bottom: 0
}

And use the :focus state to change the style of the label:

input:focus + label {
    color: red
}

See example:

http://codepen.io/robcampo/pen/zGKLgg

On focus, the label turns red. No JS required.