Selecting A Label Placed Before An Input In Various States

Inputs have states like :focus and :valid, and I want to paint the label for that input to reflect that. The problem is that my input form needs to look like this: Field title [in

Solution 1:

You can use flexbox and change the order of the elements using the flex order:

.container {
  display: flex;
  flex-direction: column; /** vertical layout **/
}

.textInput {
  order: 1;
}

.field {
  order: 0;
}

.textInput:focus + .field {
  color: red;
}

<div class="container">
  <input type="text" class="textInput">
  <label class="field">Field</label>
</div>