Can you style an active form input's label with just CSS

Question

Given the following html

label

         


        

Answer 1

Okay the idea is to wrap the input, label, help, error etc. in a Flexbox Container. Then use the + selector, to select the label element.
Note: it will work only when comes after
Then you define the order by using the flexitem order property.
Sure you can also using classnames.

.container {
    display: flex;
    flex-direction: column;
}
input {
    border: none;
}
label {
    order: -1;
}
input:focus {
    border: 1px solid red;
}
input:focus + label{
    color: red;
}

    
    Username