解决浏览器自动给<input>加背景色的问题

引言

这个问题源自浏览器会自动给 <input> 元素添加背景色，无论怎么用 CSS 调试，背景色都会莫名其妙地出现。

哪怕我们尝试修改样式属性，比如 background、background-color、:focus、:autofill 等，也依旧无法完全去掉。

就像下图所示👇
明明没有设置背景色，浏览器却“贴心地”加上了一层默认颜色：

在样式中也找不到这个颜色值

解决

也是刚好百度查找文章时看到一位大佬提供了一个非常巧妙的解决方法

通过取消固定高度，用 padding 撑开内容区域，并使用 background-clip 裁掉背景色。

input {
  height: 0;
  padding: 1.2em 0; /* 根据 UI 实际需求调整 */
  background-clip: content-box;
}

效果展示

个人学习，仅供参考哦