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

Use Flexbox

CSS is cascading, i.e. affected by the order that elements appear in the DOM. To be able to select the label only when the input is focused (input:focus + label), the label needs to come after the input, so;

Put the input before the label in the DOM and then use flexbox to reverse the order that they appear on the page.

.input-group {
    display: flex;
    flex-direction: column-reverse;
}

input:focus + label {
    color: green;
}

    
    Label