Query about Html <input type="password> tag…?

Question

I have seen different Password masking characters in different logon screens instead of \"a big black dot\". How can I change the Password masking character in password field.

Answer 1

You could use this jquery plugin: http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

or use their technique to do your own thing. Practically, you will want to have two inputs, hiding the real password input, and doing whatever you want with the text input, but using the password input for validation.

Answer 2

There is no HTML attribute to stylize the password field mask characters. You need to use a combination of HTML, CSS and JavaScript to achieve the desired effect.

Answer 3

The character displayed depends on the browser, which can choose to print an asterisk, a circle or little pictures of kittens. It's not something the user can control, not to mention the webmaster. The different chars you've seen have probably been in different browsers and/or computers.

However, you can always use good old font-face CSS attribute to alter the way such character is drawn.

Answer 4

With css3 there's a solution: you can use a custom font that contains ONLY your masking character so every character you'll type will be converted to it.

Make sure to make it compatible also with non css3 browsers like IE leaving the default marker if the font feature is not compatible.