Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable autocomplete via CSS

Tags:

html

css

forms

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.

like image 577
David Avatar asked Feb 02 '10 17:02

David


People also ask

How do I turn off autofill in CSS?

Use the <input> tag with autocomplete attribute. Set the autocomplete attribute to value “off”.

How do I remove autofill in Chrome CSS?

Sept 2020: autocomplete="chrome-off" disables Chrome autofill. Original answer, 2015: For new Chrome versions you can just put autocomplete="new-password" in your password field and that's it. I've checked it, works fine.

How do I force autocomplete off?

This can be done in a <form> for a complete form or for specific <input> elements: Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form.


2 Answers

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 Is there a W3C valid way to disable autocomplete in a HTML form?

like image 95
RobertsonM Avatar answered Oct 17 '22 08:10

RobertsonM


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").

like image 44
Christopher Klewes Avatar answered Oct 17 '22 07:10

Christopher Klewes