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

Question

当 Chrome 记住 user/pass 字段并自动建议用户输入时，我似乎无法更改这些输入字段的 CSS。

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

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

您会看到密码字段不会变为绿色。

Firefox 运行良好，这似乎只是 Chrome 的问题。

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

Answer 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;

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

Chrome input autosuggest remembered value change CSS

css

google-chrome

browser

autocomplete