Изменить цвет метки, когда значение 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.

Я пробовал: активно, но работает только при щелчке мышью:

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

Может, у кого-то есть решение для этого?

PS: У меня есть решение для этого с JS, но мне любопытно, есть ли какое-либо решение с SASS?

Answer 1

Вы также можете попробовать вот так, это будет нормально работать, как указано выше:

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

Answer 2

Еще одна опция, позволяющая избежать создания <textarea> и других элементов формы, required - использовать псевдокласс :placeholder-shown; это, конечно, требует, чтобы был установлен атрибут 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 .

Ссылки

• :placeholder-shown ^{( Селектор 4-го уровня, спец. )} .

Answer 3

Вы можете использовать свойство css valid, оно будет соответствовать, если textarea является допустимым полем, вы можете установить требуемый атрибут, и оно будет соответствовать действительному селектору, если он действителен ... https://www.w3schools.com/cssref/sel_valid.asp

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

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