html - How to hide autofill safari icon in input field

Question

Every one of my input fields has the little person icon with the arrow in safari. How to I disable that? By the way, I have any other similar page and that's not happening. I tried turning off all styles in the web inspector and the one page still has the icon.

Answer 1

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