更改自动填充值的背景输入字段的颜色

Question

我目前有一个为 Bootstrap 2 运行 bootstrap-sass 的 Rails 4 应用程序。我使用 localhost 进行测试。我有带有登录屏幕的应用程序。输入字段是白色的，带有蓝色文本的非常细的灰色边框。当我在字段中输入时，输入字段的背景是白色和蓝色文本。但是，当我转到保存登录信息的登录屏幕时，信息会填满字段，但将两个字段的背景更改为黄色，文本为黑色。一个是文本字段，另一个是密码字段。

我希望使用我在视图中定义的 css 填写信息。有没有办法用 CSS 做到这一点？我没有发现任何有关此特定问题的信息。

任何帮助，将不胜感激。我会继续寻找。

更新 3/28/2014 上午 9:15 CDT

我成功地从 Martin 建议的链接中实施了解决方案，以更改自动填充的背景颜色。我决定猜测并搜索 webkit 字体颜色文本，并找到了更改自动填充字体颜色的解决方案。

这是我的解决方案：

input:-webkit-autofill {
  -webkit-text-fill-color: $textColor;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
  -moz-text-fill-color: $textColor;
  -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
  -o-text-fill-color: $textColor;
  -o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
  -khtml-text-fill-color: $textColor;
  -khtml-box-shadow: 0 0 0px 1000px white inset;
}

Answer 1

我必须扩展您的解决方案以解决 :focus 上的输入字段。该代码目前可以满足我的需求：

input:-webkit-autofill {
    -webkit-text-fill-color: $black;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
    -moz-text-fill-color: $black;
    -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
    -o-text-fill-color: $black;
    -o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
    -khtml-text-fill-color: $black;
    -khtml-box-shadow: 0 0 0px 1000px white inset;
}

input:focus:-webkit-autofill {
    -webkit-text-fill-color: $black;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-moz-autofill {
    -moz-text-fill-color: $black;
    -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-o-autofill {
    -o-text-fill-color: $black;
    -o-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-khtml-autofill {
    -khtml-text-fill-color: $black;
    -khtml-box-shadow: 0 0 0px 1000px white inset;
}