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

Question

输入包含:focus和:valid等状态，我想绘制该输入的标签以反映这一点。问题是我的输入表格需要如下所示：

Field title
[input]

Field title
[input]
...

并且似乎无法根据输入状态选择字段标题。 +和~选择器仅适用于目标之后的元素。我无法反转direction: rtl块中元素的顺序，因为我需要字段低于标题。

剩下的就好像是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>