Selecting a label placed before an input in various states

Question

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
[input]

Field title
[input]
...

and there seems to be no way to select the field title based on input states. The + and ~ selectors only work on elements following the target. I can't reverse the order of the elements in a direction: rtl block either since I need the fields to be below the title.

All that's left seems to be hardcore options like position: absolute and to place them manually. I say hardcore since the field title have a variable height and that's a lot of manual offset typing. Are there any better alternatives?

Answer 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>