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 use the :focus-within selector.

So, you'd do something like the below. Assuming that you always have an input of some description inside of a control-group, it will style the label whenever the input is focused on.

control-group {
    &:focus-within {
        control-label {
            color: red; 
        }
    }
}

More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within