Chrome: remove autocomplete yellow background from input elements

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);                    
			});
		});
	}