html - Bootstrap 表单输入更改文本输入的背景颜色并在空字段上恢复

Question

我只需要在有人填写字段时更改输入字段的背景颜色。如果不是，请保留默认背景颜色。在 Bootstrap 中没有额外类的情况下执行此操作的任何方法？

我试过了，但没有成功。聚焦时背景颜色将消失。

<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

Answer 1

对输入字段使用“必需”验证属性:

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

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

使用占位符值检测:

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>