如何清除网页加载已保存登录凭证时的自动填充背景色？

Got it, that light blue background popping up when browsers auto-fill your login fields is super annoying—let’s fix it for good. Here’s why it’s happening and exactly how to resolve it:

Why This Happens #

Modern browsers (like Chrome, Edge) apply their own default styles to auto-filled form fields, and these styles have higher priority than your custom background-color setting. Even with autocomplete="off" on your form, browsers often ignore that now to prioritize user experience, so we need a targeted CSS workaround.

Step 1: Add CSS to Override Autofill Styles #

Paste these rules into your existing CSS. They target the :-webkit-autofill pseudo-class (covers most modern browsers) and force your desired gray background:

/* Override browser autofill background styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* Use inset box-shadow to cover the default light blue background */
    -webkit-box-shadow: 0 0 0 30px #e9e9e9 inset !important;
    box-shadow: 0 0 0 30px #e9e9e9 inset !important;
    /* Preserve your borderless style */
    border: none !important;
}

/* Optional: Fix text color if autofill makes text appear gray */
input:-webkit-autofill {
    -webkit-text-fill-color: #333 !important;
}

The inset box-shadow trick works because browsers can’t override this property as easily as a direct background-color. The !important ensures these styles take priority over the browser’s defaults.

Step 2: Update Autocomplete Attributes (Ditch autocomplete="off") #

Your current autocomplete="off" on the <form> tag is frequently ignored by modern browsers. Replace it with specific autocomplete values to let browsers fill credentials correctly while respecting your styles:

Update your input tags in HTML like this:

<input type="text" name="username" placeholder="Username" class="form-control" autocomplete="username" style="border: none; background-color:#e9e9e9; height: 40px; padding:10px;">
<input type="password" name="password" placeholder="Password" class="form-control" autocomplete="current-password" style="border: none; background-color:#e9e9e9; height: 40px; padding:10px;">

You can also remove the autocomplete="off" attribute from the <form> tag since we’re now specifying it per-input.

Step 3: Test the Fix #

Temporarily clear your browser’s saved login credentials, save your changes, then re-save your login info. Reload the page—your input fields should stay the gray #e9e9e9 color even after autofill. If you’re still seeing issues, test in an incognito window to rule out cached styles.

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