html - 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 have a form with the following input:

<input type='text' value='hello' id='cake' />

I'm not generating the form, I don't have access to its HTML at all. I do however have access to CSS applied to the page.

What I'd like is for it to behave like type=password , that is - to show up stars for what the user typed rather than the actual text being typed. Basically, I'd want that aspect (the presentation of user input) to look like a type=password field.

Since this seems like a presentation only issue, I figured there has to be a way to do this with CSS since it's in its responsibility domain. However - I have not found such a way. I have to support IE8+ but I'd rather have a solution that works for modern browsers only over no solution at all. Extra points for preventing copy/paste functionality but I can live without that.

Note: In case that was not clear I can not add HTML or JavaScript to the page - only CSS.

---

(Only thing I've found is this question but it's dealing with a jQuery related issue and it has a JavaScript solution)

Answer 1

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.