2023年11月25日发(作者：)

如何更好的去除⾕歌浏览器中input⾃动填充背景？

input

可能是平时⽹页中使⽤最多的标签之⼀了，但凡需要输⼊的地⽅都少不了。

毕竟输⼊是⼀件⽐较⿇烦的事情，所以浏览器也做出了许多便于输⼊的地⽅，⽐⽅说⾃动填充

⼀般情况下，在表单提交的时候浏览器会⾃动记录提交的内容

这个功能本来是很好的，不过当⾃动填充后，输⼊框背景会⾃动变成淡紫⾊（以前是x黄⾊，仅

限⾕歌浏览器），设计师（但凡有点审美的前端）看到了肯定就不⼲了，毕竟还是挺违和的，

那么何如去除这个默认的背景呢？

背景是如何产⽣的

按照以往的经验，如果要修改标签默认的样式，⾸先肯定是查看标签的默认样式，如下

⽐较好理解，当⾃动填充时会激活伪类，然后就变成了淡紫⾊。

:-internal-autofill-selected

如果我们设置样式覆盖

input:-internal-autofill-selected{

background: red!important;

}

虽然样式覆盖了，然⽽并没有什么⽤，仍然是默认的淡紫⾊（要是起作⽤的话就不会专门去研

究这个了），原因不明...

⽐如类似这样的效果，如果被填充了还是相当难看的

更好的解决⽅式

下⾯给出两种解决⽅式

⽅式⼀：利⽤

background-clip: content-box

既然背景改变不了，那么就把它裁掉呗。

背景颜⾊默认是渲染到的，我们可以设置只渲染到

padding-boxbackground-clip: content-boxcontent-

box

，这样背景就看不到了（当然还需指定⼀下⾼度为0。）~

input{

height: 0;

padding: 1.2em .5em;

background-clip: content-box;

}

可以看到，⾃动填充时的背景已经消失了，不过还有⼀个⼩问题，填充的⽂字颜⾊也是⽆法直

接修改的（默认为），原因相同，这⾥我们可以借助⼀下伪类

rgb(0,0,0)::first-line

input::first-line{

color: #fff

}

应该算⽐较完美了~

/xboxyan/pen/VwYKJzR

background: transparent;

}

}

效果也是⽴竿见影~