当前位置:龙哥网 > 网络技术 > chrome浏览器form表单input自动填充背景颜色的问题

chrome浏览器form表单input自动填充背景颜色的问题

longge5个月前 (12-17)网络技术82

chrome浏览器下form表单,点击input输入框选择输入记录自动填充时,输入框背景颜色会改变,这是chrome浏览器内置的表单自动填充背景颜色,查看元素后找到相关css样式如下:

input:-internal-autofill-previewed, 
input:-internal-autofill-selected, 
textarea:-internal-autofill-previewed, 
textarea:-internal-autofill-selected, 
select:-internal-autofill-previewed, 
select:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

但是就算修改相应的样式,也不能改变自动填充的背景颜色,但是可以通过box-shadow内阴影覆盖颜色。

解决方法:

方法一:

input {
	box-shadow:inset 0px 60px 0px #fff;
}

代码中的60是input的高度。

提醒:据说box-shadow存在性能问题,不建议多用。

方法二:

关闭输入框的自动填充,会导致用户体验不怎么好

所有输入框:

<form action="" method="post" autocomplete="off">
	<input type="text" name="mail" value=""/>
</form>

单个输入框

<form action="" method="post">
	<input type="text" name="mail" value="" autocomplete="off"/>
</form>
免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!