Disabling Safari Autofill on Usernames and Passwords

How to turn off Safari autofill in webpage source

I tried and failed with various "solutions" I found here on stack:

Set attribute autocomplete="off" in both the form and input elements
Added a hidden label both above and below the input tag
Added a class name suggesting the input field type
Tried a javascript solution

None of them worked. I still experienced a delay between clicking in a field and being able to enter text - and the user icon still presented phone number suggestions from my contact card.

I read an old, but otherwise helpful article about how to coax autofill to fill in the correct information. It didn't mention the solution I stumbled upon, but it inspired me to try it...

I added a placeholder attribute to the text input in my django form class:

    val = forms.CharField(widget=forms.TextInput(attrs={"placeholder": "search term"}))

And that did it! Now when I click in a search term field (which now shows "search term" in light gray - which is grudgingly OK with me), I can enter text right away and the autofill icon does not appear!:

Sample Image

How to disable autocomplete in address fields for Safari?

It seems you can't disable autocomplete in a similar way.
Safari looks for certain keywords in the id of the element and if there is something like "name", "address", "e-mail" etc., it enables the autocomplete function (tested on Safari 10.1.1).

So, the only simple workaround that I've found is to use a different id that doesn't trigger the autocomplete function.

EDIT: I found out that Safari also uses the placeholder attribute to determine whether to enable autocomplete function or not.

How to hide autofill safari icon in input field

If you want to hide it completely, you can use the following css tricks. Basically it detect that 'contacts-auto-fill-button' and move it away from your input field. Make sure you have 'absolute:position' to avoid extra padding from your fields.

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

Safari: Autofill saves username but should save email

I found the answer on apple.

I have to set email as username, then everything works.

<input
    type="text"
    name="username"
    required
>

<input
    type="email"
    name="e-mail"
    autocomplete="username"
    required
>
<input
    type="password"
    name="pass_word"
    autocomplete="new-password"
    required
>

Safari's autocomplete is breaking a form on my site

This solution works for disabling autocomplete in Safari:

If you want to disable password autocomplete on all forms, use:

::-webkit-credentials-auto-fill-button {
     visibility: hidden;
}

If you want to disable for only one form, use:

.put_your_class_here::-webkit-credentials-auto-fill-button {
     visibility: hidden;
}