Benjamin Gruenbaum Benjamin Gruenbaum - 2 months ago 6
CSS Question

Get input type=text to look like type=password

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

Well as @ThiefMaster suggested

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

suggests a way to implement it in browsers that are webkit descendants.. Opera (NEW), Chrome and Safari are taken care of but Gecko and Internet Explorer are left alone, 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 api to use them as a custom font which works back in time for quite a few old browsers using @font-face.

Comments