Disable autocomplete via CSS

Question

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 an

Answer 1

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

1-HTML way:

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

2-Javascript way:

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

3-jQuery way:

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

Answer 2

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

Answer 3

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

Answer 4

Thanks to @ahhmarr's 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.

Answer 5

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

Answer 6

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?