css实现修改浏览器自动填充表单的默认样式小白攻略_表单菜鸟教程下载

当表单中存在input[password]的时候,采用submit方式提交。就会触发浏览器自动填充表单。比如chrome自动填充后,淡黄色输入框代替了背景样式,看起来有些怪异。 那么如何通过css实现取消浏览器自动填充表单的默认样式呢?解决方法一:当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖

css实现修改浏览器自动填充表单的默认样式小白攻略

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

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>

解决方法二:

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

解决方法三:

终极解决方法, 取消浏览器表单的自动填充,这样就不用调样式了。 方法链接:http://www.fly63.com/article/detial/3132

海计划公众号
(0)
上一篇 2020/03/30 07:19
下一篇 2020/03/30 07:19

您可能感兴趣的内容