Customize the Password Hide/Reveal Button in Microsoft Edge

If you’re using Microsoft Edge, you might have noticed that it sports “Reveal Password” control — a little eye icon — automatically injected on the end side of password inputs:

As per Edge Developer Docs:

The password input type in Microsoft Edge includes a password reveal control. To make sure that the password is entered correctly, a user can click the password reveal button or press Alt+F8, to show the characters in the password field.

A password field with dots hiding the characters entered by a user. The password reveal button appears to the right of the password field. The eye-shaped icon appears next to the dots that hide the password text.

It’s a nice feature I must say, but it’s a bit quirky: it only shows the control as long as the input remains focussed. If you blur the control and later on refocus, you won’t be able to reveal the password, as demonstrated in this video:

When starting from scratch again, i.e. after clearing the password, it’ll work as expected again. I’m pretty sure this is a security feature, to make the stealing of passwords a little harder than simply pressing the password-reveal control.

~

As an author, you can use the non-standardized ::-ms-reveal pseudo class to style the reveal password control:

::-ms-reveal {
  border: 1px solid red;
}

🤔 Curious to know why it’s this specific pseudo-element selector? You can use the DevTools to discover it yourself.

Unfortunately there’s no easy way to only control only the color of the icon used, as it’s an inlined SVG. Here’s how they did it, as seen in the UA Stylesheet that ships with Edge.

::-ms-reveal {
  background-image: -internal-light-dark(
    -webkit-image-set(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xLjI2IDkuNkE2Ljk3IDYuOTcgMCAwMTggNGMzLjIgMCA2LjA2IDIuMzMgNi43NCA1LjZhLjUuNSAwIDAwLjk4LS4yQTcuOTcgNy45NyAwIDAwOCAzIDcuOTcgNy45NyAwIDAwLjI4IDkuNGEuNS41IDAgMDAuOTguMnoiIGZpbGw9IldpbmRvd1RleHQiLz48cGF0aCBkPSJNOCA2YTMuNSAzLjUgMCAxMDAgNyAzLjUgMy41IDAgMDAwLTd6TTUuNSA5LjVhMi41IDIuNSAwIDExNSAwIDIuNSAyLjUgMCAwMS01IDB6IiBmaWxsPSJXaW5kb3dUZXh0Ii8+DQo8L3N2Zz4=") 1x),
    -webkit-image-set(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xLjI2IDkuNkE2Ljk3IDYuOTcgMCAwMTggNGMzLjIgMCA2LjA2IDIuMzMgNi43NCA1LjZhLjUuNSAwIDAwLjk4LS4yQTcuOTcgNy45NyAwIDAwOCAzIDcuOTcgNy45NyAwIDAwLjI4IDkuNGEuNS41IDAgMDAuOTguMnoiIGZpbGw9IiNmZmZmZmYiLz48cGF0aCBkPSJNOCA2YTMuNSAzLjUgMCAxMDAgNyAzLjUgMy41IDAgMDAwLTd6TTUuNSA5LjVhMi41IDIuNSAwIDExNSAwIDIuNSAyLjUgMCAwMS01IDB6IiBmaWxsPSIjZmZmZmZmIi8+DQo8L3N2Zz4=") 1x)
  );
}

To change the color, you’ll have to overwrite the entire background-image.

🔥 The -internal-light-dark() function you see there definitely caught my eye. If you’re visiting a site using a light theme, the function will return the first image-set. In Dark Mode, it’ll yield the second image-set.

This function first landed in Chromium in 2019 as -internal-light-dark-color(). Later on it got renamed to its current form.

Unfortunately this handy -internal-light-dark() function is not available in the Author Origin.

Addiontally, if you’re thinking of using CSS to always show the ::-ms-reveal control using display: block !important; then I’ll have to disappoint you: the control does show it, but it’s not functional.

::-ms-reveal {
  display: block !important; /* Will always show the control but clicking it won't reveal already filled values */
}

~

In his post How to hide Microsoft Edge’s password reveal button, Stefan Judis warns for this automatically provided control: if you’re sporting your own Show/Hide Password logic, it might conflict with Edge’s one. To cater for this, Stefan suggests to hide Edge’s provided toggle:

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

Alternatively you could opt to hide your own implementation when ::-ms-reveal support is detected:

@supports(selector(::-ms-reveal)) {
  .my_custom_password_toggle {
    display: none;
  }
}

~

🔥 Like what you see? Want to stay in the loop? Here's how:

Debug memory leaks with the “Detached Elements” tool

An experimental feature in the DevTools of Microsoft Edge Canary is the “Detached Elements” tool.

The “Detached Elements” tool allows you to find all nodes that are no longer attached to the document — a typical cause for leaking memory when you forget to clean them up.

There are valid reasons for detaching elements from the tree. An application might want to remove an element from the view but re-attach it later or in a different place. For example, Twitter detaches and re-attaches tweets as you scroll through the feed.

A DOM memory leak occurs when an application keeps references to more and more of these detached elements, without actually reusing them later.

This is particularly a problem for long running applications. Imagine an email client that detaches DOM elements every time an email is opened and closed. If the user keeps the app running for a whole week, this could amount to a really high memory usage which can slow down the entire device over time, especially as the detached elements may carry a lot of data with them.

Debug memory leaks with the Microsoft Edge Detached Elements tool →