CSS to make a text field look like password field

Question

How can I set the CSS for an input field of type text in html to appear as a password field, i.e. the text in the input seems to get replaced with a symbol such as the asterisk ("*") or a dot ("•")?

I have this constraint:

<input name="passwordish" type="text" id="inputPassword" placeholder="Password" >

EDIT: Sorry if this was not clear, but for some snowflakish reasons I can't change the field type!

Answer 1

Recommended that you change text type to password

<input name="password" type="password" id="inputPassword" placeholder="Password" >

OR this

CSS Tricks

input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }

Update:

Mozilla/FireFox Explination

Try this:

input {
    text-security: circle; /* IE/Safari */
    -moz-text-security: circle; /* FireFox */
    -webkit-text-security: circle; /* Chrome/Safari  */
}

Update:

• Firefox no more supports the following css:

  • -webkit-text-security

  • -moz-text-security

Tested on Firefox 69.0, Windows 10, 64bit,