位置:首页 » 文章/教程分享 » input在chrome下自动填充后的默认样式清除

填写form表单时,chrome会自动把历史数据记住,就是获取焦点时,input会有一个记录之前填写过的文本的下拉。

自动选择后,它的样式是固定的。

也就是说input在chrome下,当input自动填充后,会有一个默认的样式 ,如下:

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

这个 background-color , 一般情况下,我们首选的 都是通过 样式覆盖,

然而在chrome中,覆盖了一次又一次,就是覆盖不了

查了一大堆文档也没说个原因出来

最后,使用了下面的方法,解决了问题。

box-shadow: inset 0 0 0 1000px #f7f7f7!important;

因为只有在之前有输入记录的情况下才会出现的,所以只有禁用input的记录就能ok!比如:
<input type="text"  autocomplete="off">

如此当你点击了input时它就不会有那一列表了!