在WebKit浏览器中更改自动完成样式

Lydia Dugger通过电子邮件向我们提供了一个很好的提示，其中提供了一种更改WebKit浏览器应用于自动完成的表单字段的样式的方法。

我们所说的自动完成

许多浏览器（包括Chrome和Safari）都提供了一项设置，允许用户自动填写常见表单字段的详细信息。 在填写要求输入姓名，地址和电子邮件之类的表格时，您已经看到了这一点。

问题在于用户必须启用此设置才能使此代码段生效。 如果启用了该设置，则WebKit浏览器将为用户设置已自动完成的字段的样式，如下所示：

请注意，自动完成字段的背景是黄色的吗？ 这就是我们要引用的内容，并且将随着此代码片段而改变。

摘录

我们可以使用-webkit-autofill伪选择器来定位这些字段并根据需要设置样式。 默认样式仅影响背景颜色，但是大多数其他属性（例如border和font-size在这里适用。 我们甚至可以使用下面的代码段中的-webkit-text-fill-color更改-webkit-text-fill-color 。

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
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;
}

演示版

请参阅CodePen上CSS-Tricks（ @ css-tricks ） 在WebKit中更改笔的自动完成样式 。

翻译自: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/