How to hide autofill safari icon in input field

Hide autofill Safari icon in input password field:

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

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