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)
You can't change the password masking character in the standard password field. You can fake it with a textbox, but it makes for a weak security model because you don't get the protection you do from the password textbox.
To take password input in HTML form, use the <input> tag with type attribute as a password. This is also a single-line text input but it masks the character as soon as a user enters it.
The <input type="password"> defines a password field (characters are masked). Note: Any forms involving sensitive information like passwords should be served over HTTPS. Tip: Always add the <label> tag for best accessibility practices!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With