Как поменять иконку глазка в input type password на собственную?

Question

[CLERFAYT]

Хочу поменять иконку глазка, которая позволяет видеть введенный пароль, на собственную, допустим на замок и т.п.
Понимаю, как добавить (убрать) дополнительный класс через JS при нажатии, но иконка, загруженная мной, не заменяет стандартную

Comments

[Steppp]

Попробуй

input::-webkit-contacts-auto-fill-button {
    opacity: 0;
}

[CLERFAYT]

Steppp, ничего не поменялось, к сожалению

[Alice]

Steppp, это не хром

Answer 1

[Platon Goldenberg]

Проверьте, не в кэше ли браузера причина. Для этого просто зайдите на сайт через режим инкогнито. Если да, то чистите кэш, и все отобразится корректно.

Comments

[CLERFAYT]

попробовал - не помогло. можно вообще убрать из стандартного input password эту возможность видеть пароль?

[Platon Goldenberg]

CLERFAYT, не скажу наверняка, но склоняюсь к тому, что можно. Какой движок у сайта?

[CLERFAYT]

Platon Goldenberg, это не сайт, просто форма в html/css. браузер edge последний

[Platon Goldenberg]

В качестве примера привожу подобную форму https://codepen.io/marciadasilva/pen/jpjwvb

В ней есть строчка, удалив которую глазок исчезнет.

<i class="far fa-eye toggle-password"></i>

Также весь JS в данном примере относится к этой теме.

fa-eye fa-eye-slash - вот эти классы подгружаются из интернета, благодаря jquery, из набора классов fontawesome. Если нашли похожую строку, то идете на сайт fontawesome.ru, выбираете там иконку, меняете в строке кода у себя маркировку на ту, что выбрали, и все должно отрабатываться.

[CLERFAYT]

Platon Goldenberg, да, он удаляется, но не совсем

если удалить тег i или весь span "новый" глазок пропадает, все верно, но стандартный все равно появляется, если начать вводить данные, как будто это зашито в сам тип input

[Platon Goldenberg]

CLERFAYT, тег дублируется в JS - тот самый третий столбик, который не поместился на скриншоте у вас

[Platon Goldenberg]

Проверил на Edge, фича действительно нестандартная и применима только для MS браузеров. Попробуйте прописать для тега input следующее:

input::-ms-reveal,
      input::-ms-clear {
        display: none;
      }