html submit取消默认样式,前端开发入门到实战：css实现修改浏览器自动填充表单的默认样式...

当表单中存在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;

}

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为前端工程师，乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习扣qun：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动画将其背景色变化的延迟时间尽可能的延长 。