引导表单输入控件不改变背景和边框颜色

Question

我正在通过以下方式更改输入控件的颜色：

//Override bootstrap variables
$input-bg: $background-color;
$input-color: yellow;
$input-border-color: $gray-500;
$input-focus-border-color: $primary;
$input-placeholder-color: $gray-600;

//Set background
.form-control
.form-control:active,
.form-control:focus,
.form-control:focus:active {
  background-color: $input-bg;
}

但是正如您在下图中看到的，当表单显示带有预填充控件时，背景是不同的颜色。另外，当我开始在输入控件中键入内容时，文本颜色为灰色，但当我离开控件时，文本颜色为黄色。

设置背景和文字颜色时我缺少什么？

Answer 1

更改 chrome 自动完成输入背景

/* Change the white to any color */
       input:-webkit-autofill,
       input:-webkit-autofill:hover, 
       input:-webkit-autofill:focus, 
       input:-webkit-autofill:active{
          -webkit-box-shadow: 0 0 0 30px white inset !important;
       }

要以相同的字体颜色输入，您应该在相关输入字段中使用 :active 和 :focus 。

Answer 2

尝试使用“！重要”一次

.form-control
.form-control:active,
.form-control:focus,
.form-control:focus:active {
  background-color: $input-bg!important;
}

Answer 3

你只是少了一个逗号。 应该是：

//Set background
.form-control,