How to Hide Autofill Safari Icon in Input Field

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;
}

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!:

How to change Safari autocomplete key icon

This works for me. Will wrap into some tailwind class and that's it.

input::-webkit-credentials-auto-fill-button {
    background-color: white;
}

Duplicate of this question:
Invalid selector webkit-credentials-auto-fill-button

---

Related Topics