I want to hide to password input with asterisk (*). When I use following type :
<input type="password"/>
It hides with '.'(circle) but I want to hide with '*'. How could I change hidden marks?
You can't do that.
The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). This character will vary depending on the user agent and OS.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
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>