如何修改input#email.form-control的浏览器自动填充背景样式？

你当前的CSS仅处理了文字颜色和移除阴影，但浏览器自动填充时的默认淡蓝色背景是通过更高优先级的内置样式设置的，直接修改background-color通常无法生效。可以通过以下方式覆盖默认背景：

修改后的CSS代码 #

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  /* 用inset内阴影填充整个输入框，覆盖默认淡蓝色背景 */
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  /* 保持文字颜色为黑色 */
  -webkit-text-fill-color: black !important;
  /* 如果需要透明背景，将上面的white替换为transparent即可 */
  /* -webkit-box-shadow: 0 0 0 30px transparent inset !important; */
}

完整示例代码 #

HTML

<div class="row">
  <div class="col-md-12">
    <label for="email">Email:</label>
  </div>
  <div class="col-md-12">
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
  </div>
</div>

原理说明 #

浏览器对自动填充的input字段会应用特殊的内置样式，优先级高于自定义CSS。通过设置-webkit-box-shadow为inset类型，用指定颜色（白色/透明）填充整个输入框区域，就能完全覆盖浏览器默认的淡蓝色背景。

内容的提问来源于stack exchange，提问作者Abdullah Sultan