Bootstrap 4输入控件-更改所选项目的自动完成背景色吗？

Question

我真的很想找到可以覆盖自举程序控件的位置，以便将窗体控件的自动完成背景色替换为白色以外的其他颜色，因为它不适合我的深色主题。

输入控件-使用自动完成输入输入值后，背景颜色变为白色：

这不好，需要灰色

对于选择（下拉框），我也得到了类似的行为，从列表中选择了一个项目后，背景变为白色，如下图所示：

我确实为选择下拉列表找到了一个解决方案，它将使用自定义CSS覆盖Bootstrap，如下所示：

select.form-control:focus::-ms-value {
color: #ffffff; /* Set text to white for selected item */
background-color: transparent; /* remove background color for selected item*/
}

但是，我仍然在寻找一种解决方案，将自动完成的默认背景颜色从主题主题的白色（白色）更改为灰色

Answer 1

在Chrome上进行测试，这是自动填充时应用于文本输入的规则：

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

您可以尝试将其更改为自己的样式，然后查看是否可行。

Answer 2

chrome中自动完成的背景是从Webkit继承的。要解决此字段，请尝试使用：

input:-webkit-autofill { 
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: green;
}
input:-webkit-autofill:focus { 
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: green;
}

您可以将白色更改为背景颜色，将绿色更改为所需的字体颜色。