Chrome: remove autocomplete yellow background from input elements

Posted by | August 21, 2012 | JavaScript, Web Development | 3 Comments
safari-vs-chrome

When autocomplete is enabled in Google Chrome, the browser will change the background color of input elements to yellow.

This is ugly and make your design look different. To get rid of this yellow background color, we can disable the autocomplete tag of input element. But if we want to have the autocomplete enabled and we don’t want this ugly yellow background, we have to use the jQuery solution. Because there is not other way to change it with css of html attributre.

We can disable it completely
	<!-- Disable autocomplete on any input elements -->
	<input name="username" type="text" autocomplete="off">
	
	<!-- In firefox we can disable it on the form element, 
	it will disable it for all input elements in the form-->
	<form autocomplete="off">  
	}
	
The jQuery Solution
	/* remove border around all input elements */
	if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
		$(window).load(function () {
			$('input:-webkit-autofill').each(function () {
				var text = $(this).val();
				var id = $(this).attr('id');
				$(this).after(this.outerHTML).remove();
				$('input[id=' + id + ']').val(text);                    
			});
		});
	}
	

avatar

About Farid

Creative web developer/designer, big fan of HTML5, CSS3 and client-side development. Lead software developer at Allegra Strategies London.

  • http://twitter.com/m__casas Mauro Casas

    The JS doesn’t work any longer :/

  • http://www.facebook.com/rvannauker Richard Lee Vannauker

    $(window).load(function()

    {

    if (navigator.userAgent.toLowerCase().indexOf(“chrome”) >= 0)

    {

    $(‘input:-webkit-autofill’).each(function()

    {

    $(this).clone(true,true).insertBefore(this);

    $(this).remove();

    });

    // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT’S TO VAR FOR FASTER PROCESSING

    }

    });

    I noticed that the jQuery solution you posted does not copy attached events. The method I have posted works for jQuery 1.5+ and should be the preferred solution as it retains the attached events for each object. If you have a solution to loop through all initialized variables and re-initialize them then a full 100% working jQuery solution would be available, otherwise you have to re-initialize set variables as needed.

    for example you do var foo: = $(‘#foo’);

    then you would have to call: foo=$(‘#foo’);

    because the original element was removed and a clone now exists in it’s place.

  • Bhushan Wagh

    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;

    }