html - 在各种状态下选择放置在输入之前的标签

Question

输入具有 :focus 和 :valid 之类的状态，我想为该输入绘制标签以反射(reflect)这一点。问题是我的输入表单需要如下所示:

Field title
[input]

Field title
[input]
...

并且似乎没有办法根据输入状态选择字段标题。 + 和 ~ 选择器只作用于目标后面的元素。我也无法反转 direction: rtl block 中元素的顺序，因为我需要字段位于标题下方。

剩下的似乎都是硬核选项，例如 position: absolute 并手动放置它们。我说硬核是因为字段标题的高度可变，而且需要大量手动偏移输入。有没有更好的选择？

Answer 1

您可以使用 flexbox并使用 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>