Blog

In HTML, there is a very clear input type for dealing with passwords:

<input type="password">

If you use that, you get the obfuscated bullet-points when you type into it, like:

••••••••

That’s the web trying to help with security. If it didn’t do that, the classic problem is that someone could be peering over your shoulder, spying on what you’re entering. Easier than looking at what keys your fingers press, I suppose.

But UX has evolved a bit, and it’s much more common to have an option like:

☑️ Reveal Password?

I think the idea is that we should have a choice. Most of us can have a quick look about and see if there are prying eyes, and if not, we might choose to reveal our password so we can make sure we type I_luv_T@cos696969 correctly and aren’t made to suffer the agony of typing it wrong 8 times.

So! What to do?

Option 1: Use type="password", then swap it out for type="text" with JavaScript

This is what everybody is doing right now, because it’s the one that actually works across all browsers right now.

const input = document.querySelector(".password-input"); // When an input is checked, or whatever...
if (input.getAttribute("type") === "password") { input.setAttribute("type", "text");
} else { input.setAttribute("type", "password");
}

The problem here — aside from it just being kinda weird that you have to change input types just for this — is password manager tools. I wish I had exact details on this, but it doesn’t surprise me that messing with input types might confuse any tool specifically designed to look for and prefill passwords, maybe even the tools built right into browsers themselves.

Option 2: Use -webkit-text-security in CSS

This isn’t a real option because you can’t just have a total input work in some browsers and not in others. But clearly there was a desire to move this functionality to CSS at some point, as it does work in some browsers.

input[type="password"] { -webkit-text-security: square;
}
form.show-passwords input[type="password"] { -webkit-text-security: none;
}

Option 3: input-security in CSS

There is an Editor’s Draft spec for input security. It’s basically a toggle value.

form.show-passwords input[type="password"] { input-security: none;
}

I like it. Simple. But I don’t think any browser supports it yet. So, kinda realistically, we’re stuck with Option #1 for now.

Demos, all together

The post The Options for Password Revealing Inputs appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.