如何修改chrome账号密码自动填充的字体样式 |
您所在的位置：网站首页 › 谷歌浏览器最小字体大小修改 › 如何修改chrome账号密码自动填充的字体样式 |
如何修改chrome账号密码自动填充的字体样式
|
项目场景：
登录页面刷新输入框自动填入的账号和密码，实际字体大小与输入框设置的字体大小不同，点击输入框后字体又变成了设置的字体大小。
问题描述：
在css样式中设置输入框字体大小为 font-size:20px ,在浏览器中也生效了，但是页面刷新字体的大小还是没有变化，仍为 14px 或 16px ，但是鼠标点击输入框字体又会变成设置的字体大小 20px ，一开始我以为是 placeholder 提示的设置了 font-size 属性，但是查看表单中的输入框设置的 placeholder 是一个固定的字符串 placeholder="用户名" ，不会出现用户的账号和密码信息，所以应该不是 placeholder 导致的问题，网上查了发现是 chrome 的自动填充的默认样式造成现在这种现象。
账号密码自动填充账号和密码的文字大小如下所示： html部分： 登 录 登录中CSS部分： .el-input { display: inline-block; height: 47px; width: 85%; input { background: transparent; border: 0px; -webkit-appearance: none; border-radius: 0px; padding: 12px 5px 12px 15px; color: $light_gray; height: 47px; caret-color: $cursor; font-size: 20px; } } 原因分析： 给表单设置自动填充 autocomplete="on" 后，chrome会默认给自动填充的input表单加上 input:-webkit-autofill 私有属性。 解决方案：1、设置 autocomplete 为 off，关闭自动填充功能。 2、通过 -webkit-autofill::first-line 设置填充文字样式，覆盖默认的样式。 .el-input { display: inline-block; height: 47px; width: 85%; input { background: transparent; border: 0px; -webkit-appearance: none; border-radius: 0px; padding: 12px 5px 12px 15px; color: $light_gray; height: 47px; caret-color: $cursor; font-size: 20px; &:-webkit-autofill { transition: background-color 99999s ease-in-out 0s !important; -webkit-text-fill-color: $cursor !important; } // 自动填充文本样式 &:-webkit-autofill::first-line { font-size: 20px; } } } |
鼠标点击之后账号和密码的文字大小： 
【本文地址】
今日新闻 |
推荐新闻 |