chrome浏览器默认填充表单内容后，修改填充后的样式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了chrome浏览器默认填充表单内容后，修改填充后的样式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1004字，纯文字阅读大概需要2分钟。

内容图文

      在做登陆页面时，碰到有浏览器记住用户名和密码可自动填充，但是样式不是很美观，用户体验也不太好，所以修改是必须的了，通过加伪类的方式修改input:-webkit-autofill，直接使用该方法并不能去掉默认的样式，使用!important提高权重也没有效果。查了些资料后，总结了一些方法可以使用，以便后期能派上用场：

1.通过纯色的阴影覆盖底色，使用:-webkit-auto属性：

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #333;
}

2.给input设置动画：

//通过延长增加自动填充背景色的方式, 使用户感受不到样式的变化
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 99999s;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

3.修改表单的子填充样式：

      通过给form表单设置autocomplete属性，如:

<form autocomplete="off">

   也可以给单个表单项设置，如：

<input type="text" autocomplete="off">

这种方法会限制用户的使用，建议用的不太多。

内容总结

以上是互联网集市为您收集整理的chrome浏览器默认填充表单内容后，修改填充后的样式全部内容，希望文章能够帮你解决chrome浏览器默认填充表单内容后，修改填充后的样式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---