Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Turn Off Autocomplete for Input

Just use the autocomplete attribute:

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

This would be useful when a text input is one-off and unique. Like a CAPTCHA input, one-time use codes, or for when you have built your own auto-suggest/auto-complete feature and need to turn off the browser default.

Comments

  1. Mat Garland

    To make your web application iPhone and iPad friendly, you can also control whether or not automatic correction or capitalization is used in your form’s input fields. This can come in handy for username fields. Do so by implementing code along the following lines:

    To turn off autocorrect:


    <input type="text" name="some_name" autocorrect="off"></input>

    To turn off autocapitalize:


    <input type="text" name="some_name" autocapitalize="off"></input>

  2. Ryan
    Permalink to comment#

    autocomplete=”off” is not valid markup with XHTML Transitional, which is a common DOCTYPE. Use this to keep a vaild markup

    if (document.getElementsByTagName) {

    var inputElements = document.getElementsByTagName(“input”);

    for (i=0; inputElements[i]; i++) {

    if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {

    inputElements[i].setAttribute(“autocomplete”,”off”);

    }

    }

    }

  3. a dev
    Permalink to comment#

    thx a lot u solved my problem :)

  4. Mac Hary
    Permalink to comment#

    Thank You…The Javascripts works for me :)

  5. asd
    Permalink to comment#

    asfsda

  6. Ghost

    Is there anyway to style the autocomplete? (without js)
    I have seen:

    #inputId:-webkit-autofill {
        background-color: white !important;
    } (bug)
    

    But it is not working and only for webkit browsers. I have a large font-size for “placeholder=”blabla” and need autocomplete. The autocomplete with this font size is look horrific…
    So:

    .search_field{font-size: 1.5em;} (input)
    .search_field:-webkit-autofill{font-size: .9em;}(autofill)
    

    :)

  7. Paresh
    Permalink to comment#

    The autofill feature on iOS not always work based on the site being surfed. I have web application when browsed on iPad the autofilll does not work. Is there any trick to enable it? Please advise

  8. Vivek Doshi
    Permalink to comment#

    There is a small issue using, when the page is validated with w3c validator it shows error “there is no attribute “autocomplete””

  9. Martin Delille
    Permalink to comment#

    I ask stackexchange.com to add this feature providing a link to your blog article: http://meta.stackoverflow.com/q/148009/195437

  10. kunal
    Permalink to comment#

    Add form Tag autocomplete=”off” you don’t need add individual input tag for auto complete off

  11. Cormorand
    Permalink to comment#

    Probably not a good idea if your visitors use Chrome, kunal.

    See http://stackoverflow.com/questions/7973462/chrome-ugly-message-when-autofill-is-disabled.

  12. Idham Perdameian
    Permalink to comment#

    Thanks, autocomplite attribute is part of HTML5 works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

  13. BrandOwner
    Permalink to comment#

    Just tried adding autocomplete=off to each input field – that didn’t work, but adding it to whole form does.

    i.e. input autocomplete="off" / – no go, form autocompete="off" – works…unless there’s something wrong with my browser(s).

  14. Y.V.Ramana
    Permalink to comment#

    ust tried adding autocomplete=off to each input field – that didn’t work, but adding it to whole form does.

    i.e. input autocomplete=”off” / – no go, form autocompete=”off” – works…unless there’s something wrong with my browser(s).

  15. Tapan Kumer Das
    Permalink to comment#

    Great! you save my time. Thanks a lot. But one more thing, its not w3c valid attribute. What should we do to get validation but still using autocomplete off feature? Thanks in advance.

  16. shaikamjad
    Permalink to comment#

    Guys it’s not working, if I use the Jquery method to turn off the autocomplete feature :(

  17. puttyshell
    Permalink to comment#

    I have to swap the username and password fields. And let the username float left. Otherwise, the username and password are auto filled.

  18. Lienkie
    Permalink to comment#

    I know your going to laugh, but where do I enter that? (<input…..)? I would really like to disable autocomplete in my browsers, and I can't get it right on the registry.

  19. Jair

    none of the above solutions worked for me. :(

  20. Sascha Trinkaus

    Chrome seems to be ignoring the autocomplete attribute as of version 34.

  21. Ronak
    $(document).ready(function(){
        $(':input').live('focus',function(){
            $(this).attr('autocomplete', 'off');
        });
    });
    
  22. karps
    Permalink to comment#

    I have set the attribute of autocomplete=”off”. But safari browser autocomplete is working. How to slove the autocomple off problem?!!

  23. Joe Johnson
    Permalink to comment#

    If you need to disable autocomplete for a password field, feel free to use a plugin I created: https://github.com/say2joe/jquery.disable-autocomplete

  24. salem
    Permalink to comment#

    Nice snippet! Thanks!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```