Home >Web Front-end >CSS Tutorial >How Can I Override Browser Form Auto-Filling and Input Highlighting Using HTML and CSS?
Overriding Browser Form Auto-Filling and Input Highlighting
When working with multiple forms on a single page, it's common to encounter issues with auto-filling and unwanted highlighting. This article addresses these concerns, focusing on utilizing HTML/CSS to disable auto-filling and override the yellow highlighting.
Disabling Auto-Filling
The previous solution involving the use of strong elements inside shadows has become outdated in newer Chrome versions. An alternative approach is to suppress auto-filling by:
<input autocomplete="off" ...>
Overriding Highlight Color
To override the unwanted yellow highlighting, apply the following CSS rule:
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 50px your_background_color inset; -webkit-text-fill-color: your_font_color; }
Replace "your_background_color" with the desired background color and "your_font_color" with the desired font color.
Note: This solution may not be fully effective in all browsers. Some browsers, such as Firefox, may still display a faint yellow highlight.
The above is the detailed content of How Can I Override Browser Form Auto-Filling and Input Highlighting Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!