7

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

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

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

更新 2014 年 3 月 28 日上午 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;
}
4

1 回答 1

3

我还必须扩展您的解决方案以解决 :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;
}
于 2014-05-19T14:57:47.520 回答