更改自动填充输入字段的字体颜色

Posted 2023-03-05

【中文标题】更改自动填充输入字段的字体颜色

【英文标题】：Change font color of autofill input field

【发布时间】：2014-05-03 03:21:57

【问题描述】：

我已经设法使用以下代码将自动填充输入字段的背景颜色从黄色更改为白色：

input.login:-webkit-autofill 
    -webkit-box-shadow: 0 0 0 1000px white inset;

但是，仅通过添加color: #999; 将字体颜色更改为灰色是行不通的。我该如何解决这个问题？非常感谢！

【参考方案1】：

input:-webkit-autofill 
    color: #999 !important;

这对你有用！

【讨论】：

你甚至没有正确地做到这一点......也不，不要使用!important。 注意： 是这样的 - color: #999 !important;

@Ruddy：谢谢，我已经更新了我的答案。你能告诉我，为什么我们不应该使用重要的？我对css不太熟悉，但我知道答案，所以回答。

看看这个page。它是一个很好的小读物。为此，我觉得没有必要使用!important，只是在有其他方法时会感到懒惰。

@Ruddy：谢谢，对我很有用:)

【参考方案2】：

试试下面的CSS

input:-webkit-autofill 
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #999;

input:-webkit-autofill:focus 
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #999;

【讨论】：

此代码有效，但仅适用于 mozila。我们如何为 chrome 做到这一点..？？

【参考方案3】：

试试下面的 CSS：

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus 
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;

我们可以使用-webkit-autofill 伪选择器来定位这些字段并根据我们认为合适的方式设置它们的样式。

【讨论】：

这是我见过的解决这个问题的最完整的答案。谢谢！

这应该是检查的答案。工作得很好！