Changing the symbols shown of a HTML password fiel

Question

Is there any way to change the asterisks (*), or in some browsers a bullet (•), that appears in password fields in HTML?

Answer 1

You can't change the password masking character in the standard password field. You can fake it with a textbox, but it makes for a weak security model because you don't get the protection you do from the password textbox. As a side note, it's generally not a good idea to change the behaviour of items like this because users have become used to one form of masking, and you will be introducing a different one - if there's no good reason to do this, I'd avoid it.

Answer 2

<input type="text" style="-webkit-text-security: circle;" />

Answer 3

As of now, it appears as though this is possible in webkit browsers. Please see http://help.dottoro.com/lcbkewgt.php for examples and documentation.

Does not apply to password input

<input type="text" style="-webkit-text-security: square;" />

There is no good solution for other browsers as of when this answer was written and even in webkit browsers, the characters you are allowed to specify are very limited.

Answer 4

I know that is a very old question, but I faced this problem today, and I solved it using this approach: https://github.com/Mottie/input-password-bullet

Basically, I created a new font where assign the default point, to another icon. Then, only need to import the font files to the project and add a css similar to this:

@font-face {
    font-family: 'fontello';
    src: url('/fonts/fontello.eot');
    src: url('/fonts/fontello.eot') format('embedded-opentype'),
    url('/fonts/fontello.woff') format('woff'),
    url('/fonts/fontello.ttf') format('truetype'),
    url('/fonts/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    color: red;
    font-size: 16px;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

    /* add spacing to better separate each image */
    letter-spacing: 2px;
}

Hope this helps!

Answer 5

No - the user agent chooses its own default style, and there is (to my knowledge) no CSS attributes you can change to determine the masking character.

Of course, this would be possible if the password field was just a standard text field, and you manually masked the input with a javascript event handler (onKeyPress, probably). You could even declare the field as type="password" in the HTML, then have your JS function modify the DOM to change its type. I'd be a little wary about doing this, though; the browser implementation is almost certainly pretty solid, and circumventing established security functionality to roll your own is rarely a good idea.

Answer 6

Create your own font and use @font-face and font-family (and font-size) for input[type="password"]. It should help to solve your problem. But... you must create font with replaced bullet and asterisk character. All character numbers in font may represent the same character. Use google to find free program to edit vector fonts.

Never say "it is impossible". You should find a hack for your problem.

Characters to be replaced with your symbol (for Chrome, Firefox and MSIE): 26AB, 25E6, 25CF, 25D8, 25D9, 2219, 20F0, 2022, 2024, 00B7, 002A.

(18C)