Get input type=text to look like type=password

Question

tl;dr

I have an input with type=text which I want to show stars like an input with type=password using only CSS.

---

Basically I

Answer 1

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