Chrome 输入自动提示记忆值更改 CSS

【问题标题】：Chrome input autosuggest remembered value change CSSChrome 输入自动提示记忆值更改 CSS
【发布时间】：2020-09-29 20:13:57
【问题描述】：

当 Chrome 记住用户/密码字段并自动向用户建议该条目时，我似乎无法更改这些输入字段的 CSS。

您可以尝试通过 Chrome 中的 DevTools 编辑登录表单中的 Facebook 密码字段：

element.style {
    background-color: green !important;
}

您会看到密码字段没有变成绿色。

Firefox 效果很好，这似乎只是 Chrome 的问题。

所以基本问题是： 如何为自动建议/自动完成字段覆盖浏览器的内置 CSS？

【问题讨论】：

标签： css google-chrome browser autocomplete

【解决方案1】：

您可以关闭浏览器的自动完成功能。

<input name="q" type="text" autocomplete="off"/>

或者您可以使用它在 chrome 中进行自定义：

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: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;

【讨论】：

这行得通。谢谢！（我的意思是，CSS 部分，我不想取消自动完成功能）
好的，听起来不错。是的，如果您还想控制自动完成属性，我提供了两种解决方案。