如何在表单自动完成时去除input与textarea的高亮背景并保持透明状态

Hey there! I totally get how frustrating it is when browser autofill overrides your clean transparent input styling with that default yellow (or browser-specific) highlight. Let's get this sorted for your form right away.

The Root Issue #

Browsers apply their own default styles to form elements when they're auto-filled, which directly overwrites your background-color: transparent setting. To fix this, we need to target the specific pseudo-classes browsers use for autofilled fields.

The Solution #

Add these CSS rules to target autofilled states for both input and textarea elements. We'll use a combination of pseudo-classes and a clever box-shadow trick to ensure the transparent background stays intact:

form input,
form textarea {
  width: 98%;
  margin: 5px;
  border: 2px solid white;
  padding: 10px;
  background-color: transparent;
  font-weight: 600;
  color: white;
  font-family: 'Poppins', sans-serif;
}

/* Target autofilled states for WebKit/Blink browsers (Chrome, Safari, Edge) */
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill,
form textarea:-webkit-autofill:hover,
form textarea:-webkit-autofill:focus {
  /* Override the autofill background */
  background-color: transparent !important;
  /* Use box-shadow to "cover" any lingering browser default styling */
  box-shadow: 0 0 0px 1000px transparent inset !important;
  /* Keep your text color consistent */
  -webkit-text-fill-color: white !important;
  /* Preserve your custom font settings */
  font-family: 'Poppins', sans-serif !important;
  /* Prevent the browser from messing with your border */
  border-color: white !important;
}

Quick HTML Corrections #

I spotted a couple tiny typos in your original HTML that might cause issues—here's the cleaned-up version:

<form class="form appear appear-hidden" method="post">
 <h1>Contact Me</h1>
 <div class="name-section">
 <input name="name" type="text" placeholder="Name" required />
 <input name="surname" type="text" placeholder="Surname" required />
 </div>
 <input name="email" type="email" placeholder="Email" required />
 <textarea name="message" placeholder="Message" rows="4" required ></textarea>
 <input class="submit" type="submit" value="Submit" />
</form>

(Fixed duplicate name="name" on the surname input, changed row="4" to rows="4" for the textarea, and swapped the submit button's placeholder to value—submit buttons use value for their visible text.)

Why This Works #

• The -webkit-autofill pseudo-classes target elements that have been auto-filled by the browser.
• !important ensures our styles take precedence over the browser's default rules (a safe fallback here, even though specificity could work in most cases).
• The box-shadow trick is crucial because some browsers don't respect background-color on autofilled elements—this creates a transparent "inset overlay" that completely covers the browser's default highlight.

That should keep your inputs and textarea looking clean and transparent, even when the browser auto-fills them! 😊

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