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

使用＆＃34;必需＆＃34;验证属性到输入字段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用占位符值检测：

＆＃13;

＆＃13;

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


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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;