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

Question

当有人填写该字段时，我只需要更改输入字段中的背景颜色。如果没有，请保留默认背景颜色。在引导程序中没有额外类的情况下有什么方法可以做到这一点？

我试过，但没有运气。聚焦时背景颜色将消失。

<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;
}

提琴手

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>