Closed1

パスワードを表示/非表示にする目のアイコンの消し方

ピン留めされたアイテム
m_03m_03

やりたいこと

  • inputタグのtypeをpasswordに設定しEdge(ブラウザ)で表示。
  • フォームに目のアイコンが表示され、アイコン押下でフォームの値の表示/非表示が可能。
  • フォーム内には既に自前で作成した目のアイコンを表示していたため、ブラウザ既定の目のアイコンを消したい。

解決方法

Edgeでは既定でinput type="password"の場合、目のアイコンが表示されるようになっているため、アイコンのスタイルに以下の通り手を加えることで解決できた。

::-ms-reveal {
    display: none;
}

なお、ブラウザの設定でユーザー自身でアイコンを非表示にすることも可能。

参考

https://docs.microsoft.com/ja-jp/microsoft-edge/web-platform/password-reveal

このスクラップは2022/12/21にクローズされました