Remove Browser Autofill Styling
A simple CSS snippet to stop Chrome's autofill styling from ruining your form design
CSS
Copy Code
<style>
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
box-shadow: 0 0 0 1000px #edede8 inset !important;
-webkit-box-shadow: 0 0 0 1000px #edede8 inset !important;
-webkit-text-fill-color: #245456 !important;
transition: background-color 9999s ease-in-out 0s;
}
</style>How to set it up:
- Copy the code above
- Paste it into the <head> of your page
- Change these values: #edede8 → your input background colour, #245456 → your text colour
How it works:
- Targets webkit browsers (Chrome, Safari, Edge)
- Uses a massive inset box-shadow to cover the default background
- Sets a custom text color with webkit-text-fill-color
- The 9999s transition prevents the color from changing (prevents chromes default colour from flashing)
Fancy a Free Quote?
Got a crazy idea? We’re all ears. Reach out, share your story, and let’s make some magic together. Click below to get your free quote.
