There’s an experimental CSS selector called -webkit-text-security (or text-security):
input.pw
{
-webkit-text-security: disc;
text-security: disc;
}
It’s currently supported by Chrome, Edge, and Safari. However, Firefox doesn’t support it yet, so it shouldn’t be used in production.
For now, one decent workaround is to use webfonts. You can use any font editing utility like FontForge to create a font with all the characters to be * (or any symbol you want). Then use CSS web fonts to use them as a custom font.