Disable autocomplete via CSS

Is it possible to use CSS to disable autocomplete on a form element (specifically a textfield)?

I use a tag library which does not permit the autocomplete element and I would like to disable autocomplete without using Javascript.

As it stands, there is no 'autocomplete off' attribute in CSS. However, html has an easy code for this:

<input type="text" id="foo" value="bar" autocomplete="off" />

If you're looking for a site-wide effector, an easy one would be to simply have a js function to run through all 'input' s and add this tag, or look for the corresponding css class / id.

The autocomplete attribute works fine in Chrome and Firefox (!), but see also https://stackoverflow.com/questions/582244/is-there-a-w3c-valid-way-to-disable-autocomplete-in-a-html-form

You can use a generated id and name everytime, which is different, so the browser cannot remember this text-field and will fail to suggest some values.

This is at least the cross browser safe alternative, but I would recommend to go with the answer from RobertsonM (autocomplete="off").

you can easily implement by jQuery

$('input').attr('autocomplete','off');

If you're using a form you can disable all the autocompletes with,

<form id="Form1" runat="server" autocomplete="off">

CSS does not have this ability. You would need to use client-side scripting.

I tried all suggested ways from this question answers and other articles in the web but not working anyway. I tried autocomplete="new-random-value", autocomplete="off" in form element, using client-side script as below but outside of $(document).ready() as one of the user mentioned:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

I found maybe another priority in the browser cause this weird behavior! So I searched more and finally, I read again carefully below lines from this good article:

> For this reason, many modern browsers do not support > autocomplete="off" for login fields: > > If a site sets autocomplete="off" for a

, and the form includes > username and password input fields, then the browser will still offer > to remember this login, and if the user agrees, the browser will > autofill those fields the next time the user visits the page. If a > site sets autocomplete="off" for username and password fields, > then the browser will still offer to remember this login, and if the > user agrees, the browser will autofill those fields the next time the > user visits the page. This is the behavior in Firefox (since version > 38), Google Chrome (since 34), and Internet Explorer (since version > 11). > > If you are defining a user management page where a user can specify a > new password for another person, and therefore you want to prevent > auto-filling of password fields, you can use > autocomplete="new-password"; however, support for this value has not been implemented on Firefox.

It's just worked. I tried in chrome specially and I hope this continues working and help others.

There are 3 ways to that, i mention them in order of being the better way...

1-HTML way:

<input type="text" autocomplete="off" />

2-Javascript way:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery way:

$('input').attr('autocomplete','off');

I solved the problem by adding an fake autocomplete name for all inputs.

$("input").attr("autocomplete", "fake-name-disable-autofill");

I just use 'new-password' instead 'off' on autocomplete.

and I also have try using this code and works (at least on my end), I use WP and GravityForm for your information

$('input').attr('autocomplete','new-password');

Thanks to [@ahhmarr's][1] solution I was able to solve the same problem in my Angular+ui-router environment, which I'll share here for whoever's interested.

In my index.html I've added the following script:

<script type="text/javascript">
	setTimeout(function() {
		$('input').attr('autocomplete', 'off');
	}, 2000);
</script>

Then to cover state changes, I've added the following in my root controller:

$rootScope.$on('$stateChangeStart', function() {
				$timeout(function () {
					$('input').attr('autocomplete', 'off');
				}, 2000);
			});

The timeouts are for the html to render before applying the jquery.

If you find a better solution please let me know.

[1]: https://stackoverflow.com/a/8651838/5211269 "dsda"

You can't use CSS to disable autocomplete, but you can use HTML:

<input type="text" autocomplete="false" />

Technically you can replace false with any invalid value and it'll work. This iOS the only solution I've found which also works in Edge.