当 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;
}

但是，我需要这种颜色：颜色：#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>

Answer 2

你也可以这样试，效果和上面一样：

 textarea:not(:invalid) + label{
  background: #ff0000;
}

Answer 3

另一个避免制作 <textarea> 和其他表单元素 required 的选项是使用 :placeholder-shown 伪 class；当然，这确实需要设置 placeholder 属性（尽管它可以设置为空格或零长度字符串）：

/* selects a <label> element immediately adjacent to
   an element which has its placeholder string visible
   to the user: */
:placeholder-shown+label {
  color: #f90;
}

/* this selects all <label> elements, but is less specific
   than the selector above; so will be 'overridden' in the
   event that the previous selector matches: */
label {
  color: limegreen;
  font-size: 1.5em;
}

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 1rem;
}

.form-reverse {
  display: flex;
  flex-direction: column-reverse;
  width: 80vw;
  margin: 0 auto;
}

textarea {
  width: 100%;
  min-height: 30vh;
}

:placeholder-shown+label {
  color: #f90;
}

label {
  color: limegreen;
  font-size: 1.5em;
}

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

JS Fiddle demo.

参考文献：

:placeholder-shown ^{(Selectors Level 4 spec)}.

当 textarea 有值时更改标签颜色

Change label color when textarea has value

css

textarea

sass