Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get input type=text to look like type=password

Tags:

html

css

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)

like image 710
Benjamin Gruenbaum Avatar asked Jul 21 '13 05:07

Benjamin Gruenbaum


People also ask

How do I change my password style in HTML?

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.

How do you display a textbox for accepting password from the user?

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.

How do I password protect a text field in HTML?

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!


1 Answers

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.

like image 175
ShrekOverflow Avatar answered Sep 20 '22 01:09

ShrekOverflow