Ask your WordPress questions! Pay money and get answers fast! (more info)

Remove Yellow Chrome Autofill on Active Elements SOLVED ON OWN WordPress


I am trying to get rid of the dreaded ugly yellow chrome autofill. Tried the usual tricks and have removed it everywhere except on the login page with the :active class, and I am out of ideas.

I have this in:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
var text = $(this).val();
var name = $(this).attr('name');
$('input[name=' + name + ']').val(text);

and this:

input#user_login.input,input#user_pass.input, input#user_login.input:focus, :focus {
-webkit-box-shadow: 0 0 0px 1000px #fafafa inset !important;

input:-webkit-autofill, input::-webkit-autofill:focus, :focus, input::focus:-webkit-autofill, input:-webkit-autofill:focus, input:focus:-webkit-autofill {
-webkit-box-shadow: inset 0 0px 1000px #fafafa !important;

But nothing...

Page is here: [[LINK href=""]][[/LINK]]

You'll need to be using chrome, then try to login, and the click remember password for chrome to replicate the issue


Found solution with jquery, by putting style directly on element:

$('#loginform input[type="text"]').attr('style', '-webkit-box-shadow: inset 0 0 0 1000px #fafafa !important');
$('#loginform input[type="password"]').attr('style', '-webkit-box-shadow: inset 0 0 0 1000px #fafafa !important');

Answers (2)


Martin Pham answers:

You can try this: [[LINK href=""]][[/LINK]]

Kyle comments:

Thanks for the reply, I do not want to disable autocomplete, despite chromes stupid styling it is a helpful feature for users

Martin Pham comments:

try this

.login input#user_login.input:focus {

Kyle comments:

No luck


idt answers:

Try this:

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;

Kyle comments:

Thanks for the reply, I gave that a shot but no luck