Changing the Symbols Shown in a HTML Password Field

Changing the symbols shown in a HTML password field

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.

Hide input html for password with *

Its not possible to change the symbol using some attributes. It depends on the userAgent and OS. But you still manipulate with the few tweaks.

const inputEl = document.querySelector('input');

const dummyEl = document.querySelector('#dummy');

const resultEl = document.querySelector('#result');

inputEl.addEventListener('keyup', () => {
const dummyText = Array(inputEl.value.length).fill('*').join('');
dummyEl.innerHTML = dummyText;
resultEl.innerHTML = inputEl.value;
})
div {
position: relative;
}
input {
color: transparent;
}
span {
position: absolute;
top: 7px;
left: 3px;
}
<div>
<input type="password" />
<span id="dummy"></span>
</div>
<div id="result"></div>

Styling Password Fields in CSS

The best I can find is to set input[type="password"] {font:small-caption;font-size:16px}

Demo: