前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式
2019-05-30 22:47
1606 查看
当表单中存在input[password]的时候,采用submit方式提交。就会触发浏览器自动填充表单。比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异。 那么如何通过css实现取消浏览器自动填充表单的默认样式呢?
解决方法一:
当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景;如:
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; }
如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; height: 27px!important; line-height: 27px!important; border-radius: 0 4px 4px 0; }</span>
为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:784783012 欢迎大家进×××流讨论,学习交流,共同进步。
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。
解决方法二:
input文本框是使用图片背景的。css代码如下:
input:-webkit-autofill{/*填充样式效果取消*/ background: none !important; -webkit-text-fill-color: #fff !important; transition: background-color 99999s ease-in-out 0s; -webkit-transition-delay: 99999s; }
使用css3动画将其背景色变化的延迟时间尽可能的延长 。
相关文章推荐
- chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
- chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。
- chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。
- 浏览器表单自动填充默认样式解决办法
- chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
- 浏览器自动填充表单导致网页样式丢失
- CSS实现块宽度随浏览器大小自动调整&获取随机颜色(前端面试题)
- firefox + pentadactyl 实现纯绿色高效易扩展浏览器(同时实现修改默认状态栏样式)
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
- 表单自动填充样式修改
- 浏览器自动填充表单导致网页样式丢失
- Web前端开发实战1:二级下拉式菜单之CSS实现
- PHP ThinkPHP补充。插入(修改)数据时,对默认字段进行自动填充;form表单字段映射成合法字段;"瞻前顾后机制"
- 【Web前端笔记】浏览器页面白边问题,css修改默认边距
- 纯CSS修改浏览器的默认滚动条样式
- css修改浏览器默认的滚动条样式
- chrome浏览器表单自动填充默认样式-autofill
- Chrome浏览器表单自动填充默认样式覆盖方法
- 当表单自动填充_去除chrome浏览器自动添加的默认样式
- 前端开发小工具SuperApp——Ctrl+S自动刷新浏览器