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

Answer 2

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