前台开发入门到实战：css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候，采用submit方式提交。就会触发浏览器自动填充表单。比方chrome自动填充后，淡黄色输入框代替了背景样式，看起来有些怪异。 那么如何通过css实现取消浏览器自动填充表单的默认样式呢？

处理方法一：

当input文本框是纯色背景的，可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

web前台开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习方法（详细的前台项目实战教学视频）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>

处理方法二：

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动画将其背景色变化的推迟时间尽可能的延长 。

自己是一个6年的前台工程师,希望本文对你有帮助！

这里推荐一下我的前台学习交流扣qun：731771211 ，里面都是学习前台的，假如你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前台学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到手机端HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴，每天分享技术

点击：加入