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?

Can you post the relevant html to make the question clear? From what can see you have label first input second, and you are strict with the structure. — Stickers, Apr 15 '16 at 13:30
Related: [Is there a “previous sibling” CSS selector?](http://stackoverflow.com/q/1817792/2065702) — Zach Saucier, Apr 15 '16 at 14:58

score 3 · Accepted Answer · answered Apr 15 '16 at 12:47

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>

Selecting a label placed before an input in various states

1 Answers1

Linked