900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 谷歌浏览器记住密码——导致Input组件出现特殊样式的修改

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

时间:2019-11-17 11:46:00

相关推荐

谷歌浏览器记住密码——导致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输入框的背景颜色为透明色}

最终效果图:

完成!!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。