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

Question

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

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

但是,仅通过添加将字体颜色更改为灰色color: #999;不起作用.我怎么能解决这个问题？非常感谢!

Answer 1

试试下面的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;
}

Answer 2

试试下面的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伪选择器来定位这些字段并根据需要设置它们的样式.