Code Snippet
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 */ }
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?
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.