Make Non-Password Inputs Use Bullets (or Bullet Alternatives)

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 */ }

Reference URL

Comments

  1. User Avatar
    Thierry Koblentz
    Permalink to comment#

    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”

    • User Avatar
      Chris Coyier
      Permalink to comment#

      But it works, checkout the Reference URL.

    • User Avatar
      Thierry Koblentz
      Permalink to comment#

      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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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).

    • User Avatar
      Thierry Koblentz
      Permalink to comment#

      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 :-(

  2. User Avatar
    Sunny Singh
    Permalink to comment#

    I wonder what would be the use case behind this, changing the default password bullets feels like it will confuse a lot of users.

  3. User Avatar
    Nick
    Permalink to comment#

    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?

    • User Avatar
      Almino
      Permalink to comment#

      When you’re setting someone’s password. Something like typing password on wirelless access points.

  4. User Avatar
    daniel
    Permalink to comment#

    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

  5. User Avatar
    Kinergy
    Permalink to comment#

    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.

    • User Avatar
      Kinergy
      Permalink to comment#

      Meant to say – basically: <input type='tel'> will get you the numeric keyboard…

    • User Avatar
      Martin
      Permalink to comment#

      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 :-)

    • User Avatar
      Martin
      Permalink to comment#

      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.

  6. User Avatar
    Bobby
    Permalink to comment#

    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

  7. User Avatar
    bacalao
    Permalink to comment#

    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.

  8. User Avatar
    kk
    Permalink to comment#

    It supports in chrome,Safari .How to do this for other browsers.

  9. User Avatar
    Ursitoare

    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.

  10. User Avatar
    Pavithra
    Permalink to comment#

    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.

  11. User Avatar
    Gururaj
    Permalink to comment#

    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?

  12. User Avatar
    naga
    Permalink to comment#

    Hi,

    can anyone help me on this.

    iam searching for Equivalent of -webkit-text-stroke for FF .

  13. User Avatar
    Murlidhar Chaugule
    Permalink to comment#

    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).

  14. User Avatar
    Vijaykumar A
    Permalink to comment#

    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.

  15. User Avatar
    Paul Christian

    I’m confused …. I just ask a question …this webkit-text-security …make the password turn into like this ************** …that asterisks ?

  16. User Avatar
    Joel Caton
    Permalink to comment#

    Thanks for posting this. It helped on a cordova project I am working on.

  17. User Avatar
    VISHAL BARDOLOI

    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.

  18. User Avatar
    Sathya T
    Permalink to comment#

    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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag