CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
aleeis
aleeis

Reputation: 61

Change chrome autofill yellow with this jquery

I'm sick trying to make this working for me on my website but it is impossible.. I think I'm doing something wrong..

I have this jquery code from BenjaminMiles posted from his website: 

<script>
	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);
			});
		});
	}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="text" />

but still doesn't work... also tried the box-shadow trick, but doesn't work for me because I'm using an input with a background image.

I have the code above inside the body tag, so.. what I'm doing wrong?

Upvotes: 2

Views: 474

Answers (3)

user5863695
user5863695

Reputation: 11

vyastech fix is nice, but you should play with the "delay" of the transition in place of "duration"

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  transition: background-color 0s 3600s;
}

Upvotes: 1

vyashole
vyashole

Reputation: 79

You might not need jQuery. Use transition to make the yellow background go away. All you have to do is as follows:

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
    }

To change text color, add 

-webkit-text-fill-color: white !important;

replace white with the color of your choice.

Upvotes: 1

Pavan
Pavan

Reputation: 655

Some thing like below code work

    // Change the white to any color ;)
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

you can try using below code to change text color:

   -webkit-text-fill-color: yellow !important;

using jquery below code will work

    if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
}

Upvotes: 0

Related Questions