for auto filled fields, need to change the text and background colours
<p>for some reason bootstrap or the browser is doing this to auto filled fields. </p>
<p><img src="https://kruxor.com/images/text%20col%20change.jpg" /></p>
<p>according to my searching there is a pseudo class added to auto filled fields</p>
<h4>CSS</h4>
<pre><code class="css hljs">input:-webkit-autofill {<br /> color: #444!important; <br />}</code></pre>
<p>this option however does not seem to fix it for me. </p>
<p>the option that fixed it is here, apparently changing the focus and adding a shadow to the text fixes it. I <a href="https://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css" target="_blank" rel="noopener">found this mentioned here</a>.</p>
<h4>CSS</h4>
<pre><code class="css hljs">input:-webkit-autofill:focus {<br /> -webkit-box-shadow: 0 0 0 50px #3b3b3b inset;/your box-shadow/<br /> -webkit-text-fill-color: #b1b1b1;<br />}</code></pre>
<p>Working Demo, showing auto fill not going white anymore. so you can actually read the text. </p>
<p><strong><video autoplay="autoplay" loop="loop" controls="controls" width="100%" height="300" data-mce-fragment="1"><source src="https://i.imgur.com/dMJbuCE.mp4" type="video/mp4" /></video></strong></p>
<p><strong>Update here is the css that worked for me</strong></p>
<h4>CSS</h4>
<pre><code class="css hljs"><span class="hljs-selector-tag">input:-webkit-autofill {<br /> -webkit-box-shadow:0 0 0 50px white inset;<br /> -webkit-text-fill-color: #333;<br />}<br />input:-webkit-autofill:focus {<br /> -webkit-box-shadow: 0 0 0 50px #3b3b3b inset;<br /> -webkit-text-fill-color: #b1b1b1;<br />}</span></code></pre>
CSS
/* Not Working #1 */
@media (prefers-color-scheme: dark) {
input:-webkit-autofill {
color: #b1b1b1!important;
background-color: #3b3b3b!important;
}
}
/* Not Working #2 */
input:-webkit-autofill {
color: #444!important;
}
/* This one seems to work, but the background is still white and dark text, but at least you can read the fields */
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px #3b3b3b inset;
-webkit-text-fill-color: #b1b1b1;
}View Statistics
Add Comment
Other Items in site documentation
Related Search Terms
Other Categories in Code
