How Can I Override Default Browser Form Autofill and Highlighting with CSS?

Override Default Browser Form Behavior with CSS

Web browsers often auto-populate form fields and highlight input fields with a yellow background. While convenient for some users, it can be undesirable in certain scenarios. Let's explore how to override these default behaviors in HTML and CSS.

Disable Form Auto-filling

To prevent forms from auto-populating, use the autocomplete attribute on the form tag. For instance:

<form autocomplete="off">
  ...
</form>

However, this attribute may not be fully supported in all browsers.

Remove Input Highlight

To override the default yellow background highlighting for input fields, use the following CSS rule:

input:-webkit-autofill {
  background-color: #fff !important; /* Change to desired color */
}

This code sets the background color for input fields that are auto-filled by the browser. By using !important, you can ensure that this rule takes precedence over any other styles.

Additional Tip

If the above CSS rule doesn't work in newer versions of Chrome, try using this trick:

input:-webkit-autofill {
  box-shadow: 0 0 0 50px white inset; /* Change color to background */
  -webkit-text-fill-color: #333;
}

This creates a "strong" shadow around the input field, effectively concealing the yellow background.

The above is the detailed content of How Can I Override Default Browser Form Autofill and Highlighting with CSS?. For more information, please follow other related articles on the PHP Chinese website!