How to Create a Password-Like Input with Asterisks Using Only CSS?

Style Input Type=Text Like Type=Password

Question:

How can you modify an input element with type=text to display asterisks like a password input using only CSS?

Solution:

Despite the presentation-only nature of this issue, CSS alone can achieve this effect for modern browsers:

<code class="css">input.pw {
  -webkit-text-security: disc; /* Older Safari/Chrome */
  text-security: disc; /* W3C */
}</code>

Apply this CSS to the input element with class "pw":

<code class="html"><input type="text" class="pw" value="abcd">

<!-- Button to toggle asterisk display -->
<button onclick="this.previousElementSibling.classList.toggle('pw')">Toggle '•'</button></code>

The above is the detailed content of How to Create a Password-Like Input with Asterisks Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!