How to hide Microsoft Edge's password reveal button

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, play with the pseudo-element below.

<input type="password" required>
<input type="password" required>

/* Hide password reveal button in MS Edge */
::-ms-reveal {
  display: none;
}
/* Hide password reveal button in MS Edge */
::-ms-reveal {
  display: none;
}

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