Is there a way to "mask" the input of a text field to act like a password field (to show dots instead of text) without making the text box of type password? We prefer CSS than javascript...

any ideas?

Is there a way to "mask" the input of a text field to act like a password field (to show dots instead of text) without making the text box of type password? We prefer CSS than javascript...

any ideas?

• javascript
• css
• security

• Not without JavaScript. Why don't you just use password fields? – Tatu Ulmanen Commented Aug 26, 2010 at 11:08
• 4 Just curious, why do you want to emulate the password field when its already there? – Kristoffer Sall-Storgaard Commented Aug 26, 2010 at 11:08
• Maybe you want to input a credit card, and mask the numbers. Blind users are told by the browser that this is a PASSWORD field, and it clearly is not. – Andy Commented Jun 8, 2018 at 20:42
• Another use case is if you don't want the browser to try to save the field's value after the form submits. Most browsers seem to try to act like password managers these days – devinm Commented Dec 12, 2022 at 15:45

3 Answers 3

This may be the answer you were looking for:

-webkit-text-security: disc;
-moz-text-security: disc;
text-security: disc;

There are ways to change the way the characters are displayed when they're being input into the field (http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/), but password masking cannot be achieved using basic CSS.

The only possible solution I can think of would be to create a font that only consists of your desired mask character (using that for every character) and then using an @font-face declaration to tell the input field to use that font. However, @font-face has poor browser support, so relying on it for such an important function is a dangerous idea.

Is there any reason that you don't want to use a standard password input field? Consider the benefits:

• Password fields work in every browser
• The masking is automatic
• They can be extensively styled, but it won't interfere with the password masking
• Browsers don't use autofill on password fields (unless there's a password manager installed)

If you need an input that works like a password field, just use the password field. Don't reinvent the wheel.

Have a read of this: http://www.puremango.co.uk/mask/