最近在开发 Web 端页面时，发现 Chrome 浏览器有一些展示问题，比较困惑，网络上搜索时，发现很多人遇到这个问题，特此记录。

问题表现

原因

给表单设置自动填充 autocomplete="on" 后，Chrome 会默认给自动填充的input表单加上 input:-webkit-autofill 私有属性。

解决办法

方法一：对私有属性设置样式(无效)

input:-webkit-autofill::first-line {
	font-size: 20px;
}

方法二：关闭自动填充（有效）

<input type="password" autocomplete="new-password" />

Ref

• chrome浏览器自动填充密码的字号设置不生效
• chrome谷歌浏览器input记住密码后回显时字体很小