CSS修改Autocomplete样式

最新推荐文章于 2021-03-13 17:33:43 发布

转载最新推荐文章于 2021-03-13 17:33:43 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wms01/p/7574658.html

文章标签：

#javascript #前端 #ViewUI

本文介绍了一种解决浏览器自动填充表单导致的样式不统一问题的方法。通过CSS代码，可以为自动填充的内容设置一致的边框颜色及阴影效果，确保网页整体视觉效果的一致性。

举个场景：在用户登录成功的时候，浏览器有时候会咨询你是否记住密码，当你记住密码下次登录的时候，标签会自动填充，但是这样会造成样式不统一，解决办法如下：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
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;
}

转载于:https://www.cnblogs.com/wms01/p/7574658.html