<input> 样式和自动填充问题

Question

我正在构建一个登录模式，并希望使用输入标签使浏览器能够自动完成用户名和密码，但是我正在努力为输入标签完全重置用户代理样式表样式。每当自动完成完成它的事情时，旧样式就会回来。

这是我的（简化的）React 登录表单：

<form id="login-popup-container">
    <div className="login-field-container">
        <div className="login-value-title user">email</div>
        <input className="answer login-info" type="text" />
    </div>
    <div className="login-field-container">
        <div className="login-value-title password">password</div>
        <input className="answer login-info" type="password" />
    </div>
</form>

我已将此添加到我的 index.css:

input, input:focus, input:active, input:hover, input:-webkit-autofill, input:autofill, input:indeterminate, input:enabled, input:valid {
    outline: none !important;
    border:none !important;
    background-image:none !important;
    background-color:transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

它适用于 chrome incognito 浏览器 well enough

但是在常规 chrome 选项卡中，当 chrome 执行自动填充时，此操作会将用户代理样式表样式带回输入元素 like this。正如您在上面看到的，我尝试将我能想到的所有伪类添加到输入标签重置样式中，但没有成功。

有没有人以前遇到过这个问题/知道为什么会这样？

Answer 1

您不能使用 !important

覆盖 UA 样式

The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks. https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

此外，使用 CSS all 属性!

可以更有效地重置输入中的每个样式

input {
  all: unset;
}

您可以使用这些全局值：

initial - 将所有属性设置为属性默认值，由 CSS
unset - 如果正常继承：inherit，如果不是：initial
revert - 将 UA

Answer 2

对于遇到此问题的任何人...我的问题的答案原来是 Zach Jensz 的答案和向 <input> 元素添加过渡延迟的组合。这绝对更像是一种破解而不是答案，但对我来说它有效。

我的 css 重置看起来像这样：

input {
  all: unset;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: all 5000s ease-in-out 0s;
}

我的输入样式如下所示：

.classname-used-for-my-inputs {
    background: transparent;
    background-color: transparent;
    color: white;
    border: none;
}

延迟 hack 是必要的原因是因为即使在取消设置所有样式后，在 email/password 事件自动完成后，用户代理样式仍会返回（我不知道如何防止这种情况） .但至少现在延迟时间如此之长，以至于出于所有实际目的，没有人会注意到它们，所以就我的目的而言，它是有效的。

如果有人解释为什么/提出一个非骇人听闻的解决方案，我会更新这个。

<input> 样式和自动填充问题

Trouble with <input> styling and autofill

html

javascript

css

input

reactjs