input:-internal-autofill-selected 在 Chrome 上被覆盖（通过 webkit？）

Question

在 Windows 上使用 Chrome 81.0.4044.92（官方版本）（64 位）（同类：稳定），通过同步登录时保存的任何密码都会创建对input:-internal-autofill-selectedmy 的属性的覆盖input。

此处演示：

html

<div>
  <form className="login">
    <div className="username">
      <input
        className="login-input"
        id="username"
        type="email"
        placeholder="email"
      ></input>
    </div>
    <div className="password">
      <input
        className="login-input"
        id="password"
        type="password"
        placeholder="password"
      ></input>
    </div>
    <div>
      <button onClick={handleClick}>Submit </button>
    </div>
  </form>
</div>

输入.sass

@import '../main.sass'

form
  padding: 15px

input
  font-family: $sans-serif
  font-weight: $normal
  color: $primary-text
  margin: 10px
  padding: 5px
  border: 4px solid
  border-radius: 4px

button
  font-family: $sans-serif
  font-weight: $bold
  background-color: $primary-button
  border: 4px solid transparent
  border-radius: 4px
  margin: 10px
  padding: 5px

主.sass

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900')
/* font families */
$sans-serif: 'Lato', sans-serif

/* font weights */
$light: 300;
$normal: 400;
$semibold: 700;
$bold: 900

/* colors */
$primary-background: #ffffff
$primary-text: #1f1235
$primary-button: #ff6e6c

是否有任何仅 CSS 的方法可以收回对该字段样式的控制？

Answer 1

css-tricks.com上有一个有效的链接。您可以根据自己的喜好调整颜色，但至少这是朝着正确方向的开始。

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