CSS高亮标签BEFORE无效输入

Question

Ciao，我在这里有这个元素：

<div class="uk-form-row">
    <div class="md-input-wrapper md-input-filled md-input-focus">
        <label>Label</label>
        <input type="text" class="md-input">
        <span class="md-input-bar"></span>
    </div>
</div>

这是来自材质设计主题（Altair Admin v2），因此页面加载后的元素就是这样：

正如你所看到的那样，标签正在四处走动（但也许并不是什么大问题）。

对于其他元素，如果它们为空（无效），我可以使用css加下划线或更改颜色：

input:invalid::-webkit-input-placeholder{
    color: #e53935 !important;
}

但是作为一个标签，在输入之前，我不知道如何用CSS选择它。如果输入无效，如何将LABEL变为其他颜色？

Answer 1

查看CSS代码（简化以说明我的观点）：

.md-input-wrapper {
  position: relative;
}

.md-input-wrapper > label {
  position: absolute;
  top: 16px;
  left: 4px;
  right: 0;
}

Label绝对相对于包装器定位，因此您可以将label元素放在HTML中的input元素之后：

<div class="md-input-wrapper">
    <input type="text" class="md-input">
    <span class="md-input-bar"></span>
    <label>Label</label>
</div>

之后，您可以使用General sibling combinator选择无效输入的标签：

input:invalid ~ label { 
   color: red; 
}