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

You don't have to cancel all properties of the autofill buttons.

To hide Safari's icons altogether, you can also just hide its wrapper.

As the icons are Shadow Content, the DOM won't show it but the shadow DOM does. Just turn on the '<>'-button in the inspector.

There you'll find the wrapping container you can target with css like this:

input::-webkit-textfield-decoration-container {
  display: none; /* or whatever styling you want */
}

Inside you will find the password keychain and the caps-lock indicator:

input::-webkit-caps-lock-indicator {
}

input::-webkit-credentials-auto-fill-button {
}

Oh, and while you're at it, don't forget IE with its clear buttons and password eye icons:

input::-ms-clear {
}

input::-ms-reveal {
}

Hide autofill Safari icon in input password field:

::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

Related: I wanted to adjust the position of the the key icon for a input[type="password"] but couldn't find the pseudo element selector anywhere.

So I cloned the webkit source and was able to find it :)

input::-webkit-credentials-auto-fill-button