1. 首页
  2. css

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

我们通过电子邮件从Lydia Dugger那里得到了一个很好的提示,它提供了一种方法来更改WebKit浏览器应用于已自动完成的表单字段的样式。我们所说的自动完成是指许多浏览器(包括Chrome和Safari)提供了一种设置,允许用户自动为常见表单字段填写详细信息。在填写要求提供姓名、地址和电子邮件等信息的表单时,您已经看到了这一点。
关键是,用户必须启用此设置才能使此代码段生效。如果启用该设置,那么WebKit浏览器将为用户设置自动完成字段的样式,如下所示:
注意到自动完成字段的背景是黄色的吗?这就是我们所指的内容,我们将对此代码段进行更改。此代码段可以使用-webkit-autofill伪选择器以这些字段为目标,并根据需要设置样式。默认样式仅影响背景色,但大多数其他属性在此应用,例如border和font-size。我们甚至可以使用-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;}演示

CSS更改WebKit浏览器中的自动完成样式 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%9b%b4%e6%94%b9webkit%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%ad%e7%9a%84%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e6%a0%b7%e5%bc%8f/