Bootstrap form input change background color on text enter and revert on empty field

问题

I just need to change the background color in input field when someone fill out the field. If not, keep the default background color. Any method for doing this without extra classes in bootstrap?

I tried with but no luck. The background color will disappear when focus out.

<div class="form-group">
  <input type="text" class="form-control">
</div>

.form-control:active,
.form-control:focus,
.form-control:focus:active {
  background-color: #96d3ec!important;
  border-color: #96d3ec;
  color: white;
}

Jsfiddle

回答1:

Using "required" validation property to an input field:

.form-control:valid {
  background-color:  #96d3ec!important;
}

<div class="form-group">
  <input type="text" class="form-control" required>
</div>

Using placeholder value detection:

input:not(:placeholder-shown) {
   background-color:  #96d3ec!important;
}


input:placeholder-shown {
   background-color:  #ffffff!important;
}

<div class="form-group">
      <input type="text" placeholder = "Enter a value" class="form-control">
</div>

来源：https://stackoverflow.com/questions/48258115/bootstrap-form-input-change-background-color-on-text-enter-and-revert-on-empty-f