This works on texty inputs (e.g. text, email, etc) but you cannot change actual password inputs. Use case = ???.
input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
Hi Chris,
I don’t think authors can really use this as I think WebKit does not let you overwrite the styling of input type=”password”
But it works, checkout the Reference URL.
No it does not.
As Stephanie Sullivan noted, the “/” after “password” makes the browser treat it as “text”.
<p><input type=password /></p>
Fix the markup in the fiddle, you’ll see that it stops working.
Hm yeah interesting. Here’s a simplified fiddle
http://jsfiddle.net/chriscoyier/8WpNg/52/
I didn’t change the markup as
<input type=password />is perfectly valid. It doesn’t change the type to text, it just doesn’t let you change the styling. It’s locked down somehow.I’ll change the snippet to explain that it only works for text(ish) inputs. (I tried it on type=email and it worked there).
We thought that it was the “/” in there that somehow changed things, because if I recall removing it showed a different behavior.
But now that I try the reference URL I can’t reproduce the behavior!??
Did you ever see that working on input with type=password? I thought it used to…
In any case, as I suggest in my first post, and as Tab Atkins confirmed, there is no way to overwrite that :-(
I wonder what would be the use case behind this, changing the default password bullets feels like it will confuse a lot of users.
You can go into “inspect element” in chrome and change it from “disc” to “none” and it will show the actual letters. So, what purpose then will this serve?
When you’re setting someone’s password. Something like typing password on wirelless access points.
Hi,
im trying to change the a password input character to square without success i tried to look it up couldn’t find any resource that tells u hoe to do it.
thank you,
Daniel
One purpose for webkit-text-security is to create a PIN code input on iOS and Android that uses the native number keyboard instead of the alphanumeric. Basically: will get you the numeric keyboard, and setting webkit-text-security will get you the hidden entry! I also use autocomplete=’off’ to ensure that the PIN couldn’t be auto-populated.
Meant to say – basically:
<input type='tel'>will get you the numeric keyboard…Hello Kinergy. This is exactly what I am trying to acheive but it does not function.
Currently I have an input like this:
<input type=”tel” name=”myInput” id=”myInputID”/>
And CSS thus:
input[type=”tel”]{
-webkit-text-security: disc;
}
I have tried it inline and a specific class but neither work. I am using Android ICS. Any hints on how you got this working :-)
In the end I wrote Javascript to take the input from a tel input field and replace it with asterisk looks just like a password input but with the numeric soft keyboard. Interesting to know why the CSS did not function though.
Hi Martin,
It appears that 3rd party keyboards don’t obey this – I tried with a Swype keyboard and it didn’t work, but it did work with the standard Android keyboard!
Maybe that was why it didn’t work for you?
Cheers
of course like your web-site however you have to check the spelling on several
of your posts. Many of them are rife with spelling problems and I in finding it very
bothersome to inform the reality nevertheless I will definitely come
again again.
It supports in chrome,Safari .How to do this for other browsers.
Thanks for the quick tip, I had a problem with a type=’password’ and this really saved me from re-writing a big part of my css.
Btw in fiddle it seems to not be a difference between -webkit-text-security: disc and circle, am I missing something? I am on chrome latest version.
Hi ,
I am working in Cross Platform ,I develop Single code base and run it on all other platform like android,ios,windows and Blackberry.
I used -webkit-text-security: disc; to replace the input with disc and it works only on few devices and doesn’t support all platform(windows phone 8 and android S2).Once i done research on it i come to know that it is because webkit support only few browser.so please help me out to solve this issue.
Thanks in advance.
Hi ,
I am using jsf input text field in my application,this should be used in both desktop and mobile.in mobile onclick on text field it should enable numeric keypad.can anyone help me on this?
Hi,
can anyone help me on this.
iam searching for Equivalent of -webkit-text-stroke for FF .
Hello
I have used this in the mobile app of phonegap. but it is not working in some android versions. Can somebody help ?
It is not working on a Sony Xperia (4.0.4) and Samsung Duos (4.2.2).
Hello
I need bullets for non-password fields. The code working fine in chrome, but it is not working in Fire fox.
Any help will be appreciated.
Same problem. -webkit properties only work in Chrome. There is no support for other browsers. How can we achieve that?
I’m confused …. I just ask a question …this webkit-text-security …make the password turn into like this ************** …that asterisks ?
Thanks for posting this. It helped on a cordova project I am working on.
Use case: double-blind inputs. A pair of inputs that requires the exact same text to be entered in both. If they don’t match, then the inputs are cleared (as if they had entered nothing).
You may think this is password-only, but it also helps when entering Socials, DoB etc. for user identification.
This works well.. But we are facing problems in iphone. When entering the values in gift cart pin number, the iphone considers as a password field and asking us whether to save this or not.
Note : the above css is applied to the pin number field of the gift card. Issue occurs in ios10 safari
So here is some terrible advice, for many reasons, most importantly, this is bad for a11y. BUT, for science, here is a way to have a password field… that isn’t a password field.
https://jsfiddle.net/qaddgf7x/
@Jared
I tried your code https://jsfiddle.net/qaddgf7x/
with
Chrome Version 61.0.3163.100 – works as advertised :)
Opera 48.0.2685.35 – works as advertised :)
IE 11.0.9600.16428 – password text displayed as readable :(
FireFox 55.0.3 – password text displayed as readable :(
any idea why that would be?
thanks
further info
iMac running Safari 10.1.2 – works as advertised :)
The reason is that not all browsers use webkit. The ones that do support it work as expected. The ones that don’t default to plain text.
Did you find the solution for this?
Possible cross-platform solution that uses a single character font to obscure the input text.
https://github.com/noppa/text-security
Check out https://github.com/Mottie/input-password-bullet. It replaces the bullet by using an icon font. So any icon can be used!
It’s important to note that none of these are secure what-so-ever. I’m researching a solution for this and when I come up with one I will share it.
Always remembers…..
That -webkit-* means browsers that support webkit (firefox does not for example).
A user could inspect element with all of these answer and see the real value of the input.
So if you’re using chrome and you’re only trying to obfuscate the input value from people looking over a user’s shoulder, then -webkit-text-security: square; is fine, but if you actually need security, none of these will work ….unfortunately.
The only real answer will involve JavaScript. In reality, we’re probably going to have to grab the user input, store it in one variable that’s connected to your form model, and then convert it to some other character like an asterisk * and replace the input value with the values of the obfuscated variable. This will of course need to be done on keyup.
Sadly, my potential solution is most likely going to be a bear to implement. I’ll update later after I’ve written the code and had an opportunity to get in front of IE and Edge to test it appropriately.
The input-password-bullet example I shared is secure, in as much as any typical password type input is secure, because it’s replacing the font of the password type input.
@kevin Smothers, its worth notign that while you are sort of correct (depending on what the goal is/use is for this field), technically, the type=”password” field is ALSO not secure. As one can just inspect the element, and change type to “text” so, actually, webkit-text-security is just as secure as the default password field that it is trying to mimick, as long as you put in fallbacks for unsupported browsers.
One use case is to prevent browsers from prompting users if they want to save the password. Modern browsers don’t have a way to suppress the prompt and this solution works in chrome (and perhaps other webkit browsers) but not IE/Edge/Firefox….
Why don’t you like the browser to save the password? One use case is if I’m uploading PDFs for processing and enter the PDF’s password if it has one, there’s no value in saving those passwords. If I’m uploading a dozen PDFs with passwords, we don’t want the browser to prefill the password field either.
We have a pin code input which blocks our application after a certain time. The user enters the pin code to re-authenticate faster.
When using password fields for the pin code, the browser -if enabled to do so- tries to autofill the password and puts the username in another available field, in our case a search field. This is unwanted.
Now when I make the pincode fields of type text with -webkit-text-security: disc, the browser does not autofill the search field with the username. Problem solved.
(autofill=’off’ does not work in chrome)
This doesn’t work in Firefox :(