Remove Yellow Chrome Autofill on Active Elements SOLVED ON OWN WordPress

• REFUNDED

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) {
$(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);
});
});
}

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="https://hookahi.com/wp-login.php"]]https://hookahi.com/wp-login.php[[/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:

jQuery(document).ready(function($){
$('#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)

2013-04-05

Martin Pham answers:

You can try this: [[LINK href="http://css-tricks.com/snippets/html/autocomplete-off/"]]http://css-tricks.com/snippets/html/autocomplete-off/[[/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 {
background-color:none;
}


---

Kyle comments:

No luck

2013-04-05

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