Menu
Definition and UsageThe autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
Trick it with a "strong" inside shadow:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
-webkit-text-fill-color: #333;
}
for the autocompletion, you can use:
<form autocomplete="off">
regarding the coloring-problem:
from your screenshot i can see that webkit generates the following style:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) as #id-styles are even more important than .class styles, the following may work:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) if that won't work, you can try to set the style via javascript programmatically
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) if that won't work, you're doomed :-) consider this:
this wont hide the yellow color, but will make the text readable again.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) a css/javascript solution:
css:
input:focus {
background-position: 0 0;
}
and the following javascript has to be run onload:
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}
eg:
<body onload="loadPage();">
good luck :-)
5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on Safari 6.0.3):
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>
6) From here:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
Add this CSS rule, and yellow background color will disapear. :)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
After 2 hours of searching it seems Google Chrome still overrides the yellow color somehow, but I found the fix. It will work for hover, focus etc. as well. All you have to do is to add !important to it.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
this will completely remove yellow color from input fields
<form autocomplete="off">
Pretty much all modern browsers will respect that.
This seems to be working for me:
input {
-webkit-background-clip: text !important;
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With