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

Question

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

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

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

你会发现密码字段并没有变成绿色。

火狐浏览器工作得很好，这似乎是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;