时间戳

首页 > 解决方案 > Chrome 输入自动提示记忆值更改 CSS

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

问题描述

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

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

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

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

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

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

标签： cssgoogle-chromebrowserautocomplete

解决方案

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

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

推荐阅读