How can I override browser CSS for autfilled inputs?

user_18234006 0
Viewed 205

When autofilled, my input elements have a browser default style that I want to change. However, the browser styles all use !important and I can't seem to override them, even with a more specific selector that also uses !important. I think the exact styles that are causing the problem are these ones:

Screenshot of styles from dev tools

Is there a way to override them, either with CSS or JavaScript? I'm certain that I've seen input elements with custom autofill styles before. In case that's important - even though I want the override to work in all browsers anyways - I'm currently using Brave, which runs on Chromium, so selectors etc. should be the same that work for Chrome.

forms css html javascript
1 Answers

You don't need Javascript to solve this, and as a rule of thumb, you should use as less JS to manipulate your CSS as possible,

you can use the -webkit-autofill pseudo-selector to target those fields and style them as you see fit. The default styling only affects the background colour, but most other properties apply here, such as border and font-size. You can even change the colour of the text using -webkit-text-fill-colour, which is included in the snippet below.

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

** note that this snippet is just an example that I had in handy; you can use it in many ways! **

user_176632250
Related