How to change the background of a textbox depending on the empty text in it?

Question

JavaScript

Hello. There is a form on boostrap,

<div class="col-md-6">
                <div class="form-group">
                  <label for="form_name">Метка</label>
                  <input id="val1" type="text" name="val1" class="form-control" placeholder="Метка:" style="background-color: #ADD8E6;">
                </div>
              </div>

If there is no text, then the background is white, if there is at least one character, then the background color is any other - how can tacos be implemented ??? Maybe there is already a site with implemented ?? It’s just that for now I understand that it is necessary to take the meaning of the text, but then it’s still wild.

Found something like this:

var ta= /*получаем ссылку на textarea */;

if(!ta.value.trim()) {
// ta empty
} else {

}

But the idea has not yet been developed (((
THANK YOU.

Answer 1

input:placeholder-shown {
    border: 1px solid red;
}

Unless of course there is a placeholder

Answer 2

If the state of the input (onchange) changes, look at the length of the entered text, if 0 change the background