Change label color when textarea has value - css

Question

I need to change color of label when textarea receiving some value.
<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>
When we focusing textarea it works fine with this code:
textarea:focus ~ label{
color: #55c57a;
}
But, I need this color: color: #ff8086; when we don't have any values, and green one(as on image above) when anything written on textarea.
I've tried :active , but it works only when Mouse clicked:
textarea:active ~ label{
color: #ff8086;
}
Maybe someone has a solution for this?
PS: I do have a solution for this with JS , but I'm curious if there is any solution with SASS as well?

Answer 1

You can use the css valid property, it will match if the textarea is a valid field you can set the required attribute and it will match the valid selector if valid...
https://www.w3schools.com/cssref/sel_valid.asp
textarea:valid + label{
background: #ff0000;
}
<textarea required="required"></textarea><label>label</label>

Answer 2

You can also try like this, this will work fine as above:
textarea:not(:invalid) + label{
background: #ff0000;
}

Answer 3

One further option, that avoids making the <textarea>, and other form elements, required is to use the :placeholder-shown pseudo-class; this does, of course, require that a placeholder attribute be set (although it can be set to a whitespace, or zero-length, string):
/* 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.
References:
:placeholder-shown (Selectors Level 4 spec).