How Can I Override Browser Autofill and Input Highlighting with HTML and CSS?

Overriding Form Autofill and Input Highlighting Using HTML/CSS

In web development, removing browser-generated auto-fill suggestions and input highlighting can be problematic, especially when dealing with multiple forms on the same page. This article addresses both issues, providing a solution to override auto-filling and remove the yellow background highlighting.

Auto-Filling:

Browsers automatically suggest previously entered information in input fields. While convenient for some users, it can be a problem when different forms on the same page should not autofill. To disable auto-fill for specific inputs, use the autocomplete attribute:

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

Input Highlighting:

By default, browsers apply a yellow background when an input field is focused. This behavior can be overridden using CSS. The :focus pseudo-class targets any element that is currently in focus. Here's how to remove the yellow highlight using CSS:

input:focus {
  background-color: transparent;
}

However, note that this solution no longer works in the latest versions of Chrome. Instead, use the following hack:

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

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

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