Why is the autofill text color not white in my form input?
I have created an HTML form and I am trying to set the text color of autofilled inputs to white. However, it doesn't seem to be working as expected. Here is my code: https://jsfiddle.net/76crfwjv/1/
input:-webkit-autofill {
background-color: #000 !important;
color: #fff !important;
-webkit-box-shadow: 0 0 0 1000px #000 inset !important;
box-shadow: 0 0 0px 1000px #000 inset !important;
transition: background-color 5000s ease-in-out 0s;
}
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
Despite setting the color to white using color: #fff !important;, the autofill text remains black. How can I ensure that the autofill text color is white? Are there any known issues or additional CSS rules I need to apply to fix this?Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
5 Replies
It may well be to the browser overriding your styles:
According to MDN:
The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overridable by webpages without resorting to JavaScript hackshttps://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
MDN Web Docs
:autofill - CSS: Cascading Style Sheets | MDN
The :autofill CSS pseudo-class matches when an element has its value autofilled by the browser. The class stops matching if the user edits the field.
Do you know where to find these JavaScript Hacks to change the color?
If you apply your form fields will set up for dark mode
Thank you both very much.
You could also try
-webkit-text-fill-color: white !important; That might work, at least on some browsers.