Question

我目前有一个为Bootstrap 2运行bootstrap-sass的Rails 4应用程序。我使用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;
}

Answer 1

我必须扩展您的解决方案以解决输入字段：焦点。此代码目前适用于我的需求：

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;
}

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

1 个答案: