How to hide Microsoft Edge’s passwort reveal button (#snippet)

I read the new web.dev course on Forms today and learned a surprising fact about forms in Microsoft Edge.

Did you know that Edge provides a "password reveal" button in password fields? That's right; password fields include a little clickable "eye icon" to show and hide the entered password.

However, a great usability feature only available in one browser isn't great. 🤷‍♂️ If you want to provide password reveal functionality to all browsers, you still have to implement it yourself. And that means you have to get rid of Edge's little gimmick.

To hide Edge's additional password functionality, use this cryptic pseudo-element. 👇

::-ms-reveal {
  display: none
}

If you're using Edge, playaround with the pseudo-element below.

[Interactive component: visit the article to see it...]

And if you want to learn more about this functionaliy, check the Microsoft Edge Reference docs.