Get input type=text to look like type=password

In WebKit-based browsers you can do so using the -webkit-text-security property. It even allows you to select the shape of the bullets (disc, circle, square).

input.pw {
    -webkit-text-security: disc;
}

Demo

input.pw {
  -webkit-text-security: disc;
}

input.pw2 {
  -webkit-text-security: circle;
}

input.pw3 {
  -webkit-text-security: square;
}

<input type="text" class="pw" value="secret">
<input type="text" class="pw2" value="secret">
<input type="text" class="pw3" value="secret">

However, this is apparently non-standard. At least the Safari CSS docs say it's an "Apple Extension". It works fine in Chrome - obviously - but I don't think any other rendering engine supports it...

You can create a font made only of dots

@font-face
    {
    font-family:'dotsfont';
    src:url('dotsfont.eot');
    src:url('dotsfont.eot?#iefix')  format('embedded-opentype'),
        url('dotsfont.svg#font')    format('svg'),
        url('dotsfont.woff')        format('woff'),
        url('dotsfont.ttf')         format('truetype');
    font-weight:normal;
    font-style:normal;
}

input.myclass
    {-webkit-text-security:disc;font-family:dotsfont;}

This might be what you're looking for...

There are many glyphs to define but there might be a simpler way to do that.. You can create a totally empty font and define only the .notdef glyph (glyph ID 0) which is used as a replacement when another glyph is not defined

As you probably know, it usually looks like this:

So, you should replace that with a dot/asterisk and test what happens with browsers... because i'm not sure if it does work on all of them (some may want to use their own missing glyph replacement). Let me know if you try...

HTH

Well as @ThiefMaster suggested

input.pw {
    -webkit-text-security: disc;
}

However, this will work in browsers that are webkit descendants.. Opera, Chrome and Safari, but not much support for the rest, another solution to this is using webfonts.

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.

You can make a fake password input with type text using a custom font. the following works in chrome, firefox, edge ...

@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

input.key {
  font-family: 'password';
  width: 100px; height: 16px;  
}

<p>Password: <input class="key" type="text" autocomplete="off" /></p>

Thanks to @rafaelcastrocouto Original Answer