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:
input { font: small-caption; font-size: 16px;}
<input type="password">
Related Topics
Change Arrow Colors in Bootstraps Carousel
How to Open Excel File in Browser, Not in Excel Application
Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)
How to Append Querystrings to a Url on Submit of a Form
Absolute Div Height Being Cut Off Inside Relative Div
Two Divs Side by Side - Fluid Display
What Is the Default Form Http Method
Floated Elements of Variable Height Push Siblings Down
Html:How to Make a Curve Like This Using HTML & CSS Using Border or Box
How to Prevent Desktop Browser (Chrome, Safari) from Zooming a Webpage
Bootstrap Toggle Collapse Is Not Working
How to Hide Link Information At the Bottom Left/Right of the Browser on Hover
Best Way to Create Video from Html5 Animation
Regex Match Open Tags Except Xhtml Self-Contained Tags
How to Make a Div Not Larger Than Its Contents
How to Change the Style of the Title Attribute Inside an Anchor Tag