css - 当 textarea 有值时更改标签颜色

Question

当 textarea 收到一些值时，我需要更改标签的颜色。

<form action="#" class="form-reverse">
   <textarea name="order-background__bussiness" id="order-background__bussiness" cols="30" rows="10"></textarea>
   <label for="order-background__bussiness">What are the company’s objectives?</label>
</form>

当我们聚焦 textarea 时，这段代码可以正常工作:

textarea:focus ~ label{
        color: #55c57a;
}

但是，我需要这种颜色:color: #ff8086;当我们没有任何值时，当在 textarea 上写入任何内容时，绿色值(如上图所示)。

我试过 :active ，但它只在鼠标点击时有效:

textarea:active ~ label{
        color: #ff8086;
}

也许有人对此有解决方案？

PS:我确实有 JS 的解决方案，但我很好奇 SASS 是否也有任何解决方案？

Answer 1

您可以使用 css valid 属性，如果 textarea 是一个有效的字段，它将匹配您可以设置必需的属性，如果有效，它将匹配有效的选择器... https://www.w3schools.com/cssref/sel_valid.asp

textarea:valid + label{
  background: #ff0000;
}

<textarea required="required"></textarea><label>label</label>