Fe-interview: [css] 第27天 怎样修改chrome记住密码后自动填充表单的黄色背景？

[haizhilin2013]

第27天 怎样修改chrome记住密码后自动填充表单的黄色背景？

[Luluiny]

设置表单属性 autocomplete="off" 或者改变背景颜色为白色或透明

[tiezhu92]

input:-webkit-autofill {
-webkit-box-shadow: 0 0 3px 100px #eee inset; //改变填充背景色
}

[xiangshuo1992]

倒是一直没注意过这个问题，搜了下思否已经有提问和回答，基本也能解决问题，包括上面的两个回答，同时CSDN的账号登录也是用上面内阴影的方法解决的。
https://segmentfault.com/q/1010000000671971

以下才是重点：
都提到了Chrome有默认样式，说“除了chrome默认定义的background-color，background-image，color不能用 !important 提升其优先级以外，其他的属性均可使用!important提升其优先级。”
可是这是为什么啊？

原来重置样式是这样的：

input:-webkit-autofill-strong-password {
    -webkit-text-security: none !important;
    -webkit-user-select: none !important;
    cursor: default !important;
    font-family: monospace;
}

input:-webkit-autofill, input:-webkit-autofill-strong-password {
    background-color: #FAFFBD !important;
    background-image: none !important;
    color: #000000 !important;
}

都加上了important，后面当然没办法重置啦，Chrome也是够横的。

webkit 内核浏览器，默认样式：http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

全文关于autofill 的就这两条，所以严肃质疑网上给出的默认样式：
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill，不靠谱！

[tzjoke]

-webkit-text-fill-color 设置文本颜色，-webkit-box-shadow inset设置填充

demo

[kokokele]

这都是考题？？？？？？没有这种需求的根本无法回答。

[haizhilin2013]

@kokokele 这并不是考题。

[diandianzd]

input{
    &:-webkit-autofill {
      box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset !important;
      -webkit-text-fill-color: #000 !important;
      transition: background-color 5000s ease-in-out 0s;
      font-size: 14px;

    }
  }

[blueRoach]

input{
    &:-webkit-autofill {
      box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset !important;
      -webkit-text-fill-color: #000 !important;
    }
  }

[MrZ2019]

-webkit-text-fill-color 设置文本颜色，-webkit-box-shadow inset设置填充