Style Text Like Passwords With CSS

Webkit have lots of experimental CSS properties that you can currently use on your website, one of the properties we are looking at now is the text-security property.

This CSS property allows you to change the the shape of the letter that are displayed in text input boxes.

When the visitor types in a input password text box all the characters they type are converted into shapes to hide the password. But if you don't want to use a password input type then you have to use a text box but then people can see what your typing in.

This is where the -webkit-text-security property comes in you are able to style your textbox to be just like a password input type.

-webkit-text-security: value;
  • circle
  • disc
  • square
  • none

This property currently only exists in webkit browsers so you will only be able to see this in Chrome and Safari browsers.

Advertise here

Comment