DEV Community

Cover image for Make your text input look like a password input
Oumayma JavaScript Developer
Oumayma JavaScript Developer

Posted on

Make your text input look like a password input

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;
}
Enter fullscreen mode Exit fullscreen mode 


<input type="text" class="pw" value="secret"/>
<input type="text" class="pw2" value="secret"/>
<input type="text" class="pw3" value="secret"/>
Enter fullscreen mode Exit fullscreen mode

result :
inputs result

Top comments (6)

Collapse
 
zoppatorsk profile image
Zoppatorsk •

should use
developer.mozilla.org/en-US/docs/W...

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer •

Yes, just in case you can't use type="password".

Collapse
 
zoppatorsk profile image
Zoppatorsk •

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.

Thread Thread
 
oumaymasghayer profile image
Oumayma JavaScript Developer •

-webkit-text-security , -mox-text-security, text-security, for all browser support.

Thread Thread
 
zoppatorsk profile image
Zoppatorsk •

Naah.. that won't work... even if typing -moz instead of -mox ;)

firefox_dev_tools
Wld have to use some alternative solution like below where use a font for it.

@font-face {
    font-family: text-security-disc;
    src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
}

input {
    font-family: text-security-disc;
    -webkit-text-security: disc;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sghribi profile image
soufieneghribi •

Quick and clear!

Read next

sanikolaev profile image

Fuzzy Search vs Lexical Search: Understanding Modern Search Techniques

Sergey Nikolaev -

arjun_das profile image

How to Turn On or Off Show Accent Color on Start menu and Taskbar in Windows 11?

Arjun Das -

congcong profile image

GBASE数据库 | Introduction to GBase 8a MPP Cluster Data Loading and Performance Tuning

Cong Li -

dhruvil_joshi14 profile image

13 PHP Website Examples That Prove PHP Still Dominates

Dhruvil Joshi -