在各种状态下选择放置在输入之前的标签 [英] Selecting a label placed before an input in various states

问题描述

输入有如：focus 和：valid 的状态，我想为该输入绘制标签反映了。问题是我的输入表单需要如下：

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]
...

似乎没有办法根据输入状态选择字段标题。 + 和〜选择器仅适用于目标之后的元素。我不能逆转元素在方向的顺序：rtl 阻止，因为我需要的字段在标题之下。

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.

剩下的似乎是硬核选项，例如 position：absolute 并手动放置。我说硬核，因为字段标题有一个可变的高度，这是很多手动胶印类型。

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?

推荐答案

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

这篇关于在各种状态下选择放置在输入之前的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！