不正确的自动完成输入样式；
Posted
技术标签:
【中文标题】不正确的自动完成输入样式；【英文标题】：Incorrect autocomplete input styles; 【发布时间】：2019-12-01 20:49:42 【问题描述】：我有带有自动完成功能的表单。我的问题是有时样式没有在表单输入（字体大小）中设置。 要重现我的情况，您需要表单和自动完成功能：
-
填写邮箱和密码；
点击浏览器地址输入右侧的钥匙图标保存表单；
提交表单；
重新加载页面。
有时当我点击页面上的任何位置时，页面加载了输入集的自动完成数据样式；
在 Google Chrome 版本 75.0.3770.142（官方版本）（64 位）中，这种情况并不常见。大约在 25% 的情况下。 但是这个问题在 Chrome 的 beta 版本中非常好看到 - 版本 77.0.3861.0（官方构建）金丝雀（64 位） - 100% 的情况。
我试过了：
内联样式， 带有 !important 的样式， 伪选择器（输入：-webkit-autofill，输入：-webkit-autofill:hover，输入：-webkit-autofill:focus）设置输入的字体大小没有任何帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.input
font-size: 24px;
</style>
</head>
<body>
<form action="#">
<input type="text" placeholder="Email" class="input" id="email">
<br>
<input type="password" placeholder="Password" class="input">
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>预期结果：
实际结果
【问题讨论】：
我在 IE edge 上进行了检查，即 11、chrome canary 77、opera、firefox、vivaldi 以及所有看起来都符合预期的结果。 我遇到了同样的问题。我希望这里能找到解决办法，因为我也需要它。 How to prevent Chrome from changing font when autofilling username/password?的可能重复 【参考方案1】：在<style> 中添加此项将设置<input> 中自动填充文本的字体大小
input:-webkit-autofill::first-line
font-size: 24px;
【讨论】：
【参考方案2】：只需更改输入的填充。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.input
font-size: 24px;
padding: 30px;
</style>
</head>
<body>
<form action="#">
<input type="text" placeholder="Email" class="input" id="email">
<br>
<input type="password" placeholder="Password" class="input">
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>【讨论】：
以上是关于不正确的自动完成输入样式；的主要内容，如果未能解决你的问题，请参考以下文章