admin管理员组

文章数量:1579086

谷歌浏览器记住密码——导致Input组件出现特殊样式的修改

  • 场景
  • 最终效果图如上所示：
  • 找到问题源头后，直接百度，找到解决办法如下：
    • 代码
    • 最终效果图：

场景

昨天写了一个登陆页面，一般登录页需要输入用户名、密码等内容，就是一个简单的表单提交。

最终效果图如上所示：

红框中的部分有个浅蓝色的底，一开始我以为是其他同事写的css的影响，后面才发现是谷歌浏览器记住密码后，自动填充后出现的默认样式：

找到问题源头后，直接百度，找到解决办法如下：

代码

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {  
    -webkit-text-fill-color: #ededed !important;  //这个地方的颜色是字体颜色，可以根据实际情况修改
    -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  //设置input输入框的背景颜色为透明色
    background-color:transparent;  //设置input输入框的背景颜色为透明色
    background-image: none;  
    transition: background-color 50000s ease-in-out 0s;  
}  
input {  
    background-color:transparent;  //设置input输入框的背景颜色为透明色
}

最终效果图：

完成！！！

本文标签： 样式组件浏览器密码Input

版权声明：本文标题：谷歌浏览器记住密码——导致Input组件出现特殊样式的修改 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1727849891a1133475.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。