Text-security properties in CSS3

How to create text security password text using CSS3?

Text-security

It creates password with different types of shapes using text security properties

There are different text security properties they are

Text-security:circle;
Text-securtiy:none;
Text-security:square;

Text-security:circle

 <p>Text security </p>
    <input type="password" value="pass" style="-webkit-text-security: circle;" />

In the above code snippet we have text security to create password with circle shape , we use webkit textsecurity :circle to create circle in the text

output

Text-security:none

Text security none property shows the password which which are entering in the text

 <style>
      input{
          -webkit-text-security:none;
      }
  </style>
</head>
<body>
    <p><i>Text security none shows the password</i></p>
    <input type="text" />
</body>

Textsecurity:none

In the above code snippet we have defined the text security property:none which is used to display the password in the text box

output

Text-security:square

It shows password in the square box

<style>
      input{
          -webkit-text-security:square;
      }
  </style>
</head>
<body>
    <p><i>Text security square shows the password in square box</i></p>
    <input type="text" />
</body>

Text-security:square

In the above code snippet we have text security:square which displays the password in square box

output