不能忍受的屎黄: chrome表单自动填充

当用户登录过你的网站,而且你的表单设置了autocomplete, 当用户再次登录时,浏览器会自动填充表单,这很方便,但是,同时填充的还有:

Screen Shot 2017-03-10 at 11.56.13 AM.png Screen Shot 2017-03-10 at 11.08.28 AM.png

这个难看的屎黄色💩

多好看的界面啊! 被这坨屎黄坏了事.

我们来看看国外开发者们对这个颜色的特征的愤怒:
https://bugs.chromium.org/p/chromium/issues/detail?id=46543

Screen Shot 2017-03-10 at 2.18.59 PM.png

原因就是chrome的在user agent stylesheet中的这一段样式

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: rgb(250, 255, 189);
  background-image: none;
  color: rgb(0, 0, 0);
}

不知为何我们不能直接覆盖这个user agnet style, 它的优先级不是没有author style高吗? 为什么不能覆盖? 等待解释

看到了一个解决办法:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
}

这个方法对大多数的设计都是可以使用的,但是如果输入背景不是纯色的,而是图片,这个解决办法就没有那么好了.