Not so long ago, I ran into a problem when a user icon appeared in Safari . This time there was another problem - the password generation icon in the same Safari, which spoils the design input . How to get rid of this problem?

enter image description here

  • Does iCloud Keychain generate this? the usual <input type=password> appears without any icon. - Sasha Omelchenko

2 answers 2

This snippet solves the problem:

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

    Try this pseudo-selector.

     input:focus::-webkit-textfield-decoration-container { visibility: hidden; pointer-events: none; position: absolute; right: 0; }

    If you enable shadow DOM nodes , then you can see the following in the DOM:

    enter image description here

    A rather not small list of pseudo-selectors can be found here .

    • Not only the icon disappears, but also the placeholder after that. - Vadizar
    • In truth, Safari is a new IE. Let's remove the icon only during the focus of the input field. - YozhEzhi