Grow your CSS skills. Land your dream job.

Last updated on:

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

  2. 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. 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?

    • Almino
      Permalink to comment#

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

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

    • Kinergy
      Permalink to comment#

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

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

    • 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. 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. 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. kk
    Permalink to comment#

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

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".