Ever wondered why password inputs look like ****** ,
turns out it's because of -webkit-text-security
property.
Here's how to make a simple text input look like a password input:
input.pw {
-webkit-text-security: disc;
}
input.pw2 {
-webkit-text-security: circle;
}
input.pw3 {
-webkit-text-security: square;
}
<input type="text" class="pw" value="secret"/>
<input type="text" class="pw2" value="secret"/>
<input type="text" class="pw3" value="secret"/>
Top comments (6)
should use
developer.mozilla.org/en-US/docs/W...
Yes, just in case you can't use type="password".
Then it is still a bad idea cuz you are using a webkit specific CSS-property. Won't work on all browsers. I mean, wont even work on Firefox. Would have to use some polyfill or some creative way to achieve the same result. .
Type password also have some other benefits, think it's easier for password managers and stuff to detect that it is a password box and auto fills the password.
-webkit-text-security , -mox-text-security, text-security, for all browser support.
Naah.. that won't work... even if typing -moz instead of -mox ;)
Wld have to use some alternative solution like below where use a font for it.
Quick and clear!