如何阻止Chrome自动填充表单时覆盖用户名/密码输入框的CSS属性？

问题描述 #

搭建登录表单时，Chrome能识别登录字段并自动填充已存储的账号密码，但填充过程中（包括悬停选择账户时），输入框的font-size、color等自定义CSS样式会被浏览器覆盖，导致样式失效。

重现代码 #

CSS

.input-stack {
  margin: 50px;
  display: grid;
  grid-template-rows: auto;
}

input {
  font-size: 2rem;
  color: white;
  background-color: #30A0A0;
}

.instruction {
  padding-bottom: 20px;
  font-size: 1.2rem;
}

.question {
  font-weight: bold;
  font-size: 1.2rem;
  padding-bottom: 20px;
}

HTML

<div class="input-stack">
  <h2>重现步骤</h2>
  <ol type="1" class="instruction">
    <li>点击下方的“Email Address”输入框。</li>
    <li>若已在谷歌密码管理器中存储登录账户，Chrome会弹窗询问使用哪个账户。</li>
    <li>鼠标悬停在任意选项上时，会发现“Email Address”输入框未遵循设置的2rem字号。</li>
    <li>选择任意存储账户后，字体颜色和背景色也会被更改。</li>
  </ol>
  <span class="question">问题：如何强制Chrome始终遵循我为输入框设置的CSS样式？</span>
  <label for="username">Email Address:</label>
  <input id="username" type="text" />
  <span>&nbsp;</span>
  <label for="password">Password:</label>
  <input id="password" type="password" />
</div>

解决方案 #

方法1：用!important提升样式优先级 #

Chrome自动填充时会给输入框添加内部样式，通过!important强制覆盖浏览器的默认填充样式：

input {
  font-size: 2rem !important;
  color: white !important;
  background-color: #30A0A0 !important;
}

注意：!important会拉高样式优先级，尽量只在必要时使用，避免后续样式难以调整。

方法2：针对Chrome自动填充伪类写样式 #

Chrome在自动填充时会给输入框加上:-webkit-autofill伪类，直接针对这个状态写样式更精准：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  font-size: 2rem !important;
  color: white !important;
  background-color: #30A0A0 !important;
  /* 可选：禁用浏览器默认的背景色过渡动画 */
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

这种方法只影响自动填充状态，不会干扰正常输入时的样式。

方法3：关闭自动填充提示（不推荐） #

如果不需要自动填充功能，可给输入框加autocomplete="off"属性关闭：

<input id="username" type="text" autocomplete="off" />
<input id="password" type="password" autocomplete="off" />

注意：该方法会降低用户体验，非特殊需求不建议使用。

内容的提问来源于stack exchange，提问作者Michael A. Allen