It would be useful to have an attribute (e.g. toggle) that adds an eye inside the password field in order to toggle the password visibility. This is becoming a very common pattern and it would be useful to have a simple way to achieve that.
Do any browsers provide this feature natively?
Good idea. Haven’t seen browers offer it but Amazon do it on mobile sign-in.
I don’t know of any browser adding it by default.
And yes, many websites display a “Show password”, including Google. It is useful also on Sign up to avoid the “Password confirmation”.
I like the idea but this seems like the kind of thing that should just be automatically done by browsers with password inputs. Does it need to be a toggle api for developers? Why not just propose standardizing the feature in browsers?
I wonder if there are any security implications if the browsers enable this feature on all password fields by default… Otherwise I agree with you that it should be a standard feature.
you could ask to at least standardize the pseudo element for the toogle button. MS uses ::-ms-reveal
The CSSWG decided on the input-security property.
I believe this allows for e.g.:
[type="checkbox"]:checked ~ [type="password"] {
input-security: none; /* Reveal password. */
}
Unfortunately this is not what I am looking for: you can already achieve the same by transforming the password field into a text field, so input-security doesn’t seem very useful in my case.
I was asking to have an eye icon that allows the user to toggle the password visibility, like input-security: eye;
Shouldn’t this be a browser/user-agent feature?
I think i wouldn’t want this option in a classroom setting, for example, where someone using it might well be watched. And yet it might be really useful for unlocking the password manager, which isn’t assocated with a Web page.
Hey folks,
I completely agree that this should be a part of the web platform. We’ve had this paradigm in Microsoft Edge for quite a few years and while yes input-security does indeed exist that doesn’t necessarily preclude the standardization of psuedo within the text input. Here is the explainer regarding the above proposal. Would love to know if you all have any additional feedback regarding the proposal.
The author of this thread wants an HTML attribute to show the toggle so current features proposed in the explainer do not address the need.
Unless I’m misunderstanding the usecase the solution is just in a different form. What would be the need for an attribute in addition to a pseudo class and psuedo element?