Changing the symbols shown in a HTML password field - html

Question

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

Answer 1

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)

Answer 2

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 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

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

Answer 7

Looks like I'm pretty late, but another potential solution is below for any looking for a workaroud. The only "bug" I didn't bother to look into was that you can't highlight and delete everyhting at once. Other than that, it works as intended, the user can input their password and they will see a string of whatever you want (in this example, a star) and their recently pressed key.
//window.onload = () => {
// sessionStorage.text = "";
// sessionStorage.visible = false
//}
//We will use the text and visible variables for demonstration purposes as session storage does not work with code snippets. The star can really be anything you want
const star = "*";
let text = "";
let isVisible = false;
function toggle(id) {
const button = document.getElementById(id);
const input = document.getElementById("password-input");
switch (isVisible) {
case false:
button.innerText = "Hide Password";
input.value = text;
isVisible = true;
break;
case true:
button.innerText = "Show Password";
input.value = star.repeat(text.length);
isVisible = false;
}
console.log(`Text When Button Clicked: ${text}`);
}
function formatInput(id) {
//The tl:dr of this is that each key pressed (so long as it's valid which is to be determined by you) will be added to session storag which you can call from anywhere, allowing you to register stars of the correct length or text of the correct value
const elem = document.getElementById(id);
const keyPressed = event.key;
//event.key should be equal to 1 unless you want it to register "Backspace" and so on as inputs. The elem.value change in the first conditional is necessary to avoid removing more than 1 character on the input; Wihtout it, we would get something like text.length = x and elem.value.length = x - 1
if (keyPressed == "Backspace") {
text = text.substring(0, text.length - 1);
elem.value = elem.value.substring(0, elem.value.length);
console.log(`Text at Backspace: ${text}`)
return;
}
if (keyPressed.length == 1) {
text = text + keyPressed;
elem.value = text;
}
//You could use a conditional here, I just prefer switches in the case that we are checking one simple thing
switch (isVisible) {
case false:
elem.value = star.repeat(text.length - 1)
console.log(`Text When Password = Hidden: ${text}`)
break;
case true:
elem.value = text;
//This is required as wihtout it there is a bug that duplicated the first entry if someone decides to show the password
elem.value = elem.value.substring(0, text.length - 1)
console.log(`Text When Password = Visible: ${text}`)
}
}
div {
display: flex;
flex-direction: column;
align-items: center;
}
input {
width: 50%;
height: 35px;
border: 0px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
border-radius: 5px;
padding-left: 15px;
letter-spacing: 2px;
outline: none;
}
input:focus {
border: 1px green solid;
}
button {
height: 35px;
background-color: rgb(94, 124, 153);
border-radius: 5px;
border: 0px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
cursor: pointer;
width: 30%;
margin-top: 30px;
color: white;
}
<div>
<input type="text" id="password-input" placeholder="Password" onkeydown="formatInput(this.id)" value="">
<button id="toggle-button" onclick="toggle(this.id)">Show Passowrd</button>
</div>