在 WebKit 内核的浏览器中，当用户的设置中允许表单自动填充，填充后有一个背景颜色，打开控制台的 styles 看到 input:-internal-autofill-selected 设置了背景色和字体颜色，大喜。在 css 中改完发现无效，明明看到覆盖掉了这个的样式，怎么还是有背景色呢？

看到 css-tricks 上的一篇文章，说这个填充的背景样式是由 -webkit-autofill 这个伪类控制的,而填充背景色则是由 -webkit-box-shadow 属性控制的，下面来看看修改填充样式的一个 demo

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: #333333;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

完美，自动填充的样式被修改为我想要的样子了。这里要说一下我为什么非得修改这个自动填充的样式呢？我们知道同样是 webkit 内核，在不同浏览器上，自定义的行为可能是不一样的，也许这个浏览器的自动填充背景色是这个颜色，另一个浏览器想彰显个性就表现不一样了。而对于程序来说，不可控的因素是致命的，我想要我的页面在不同情况下表现能一致。