Can I Style a Text Input to Mimic a Password Field Using CSS?

Styling Text Inputs to Resemble Password Fields

Question:

Is it possible to make an input element with type="text" appear identical to one with type="password" (i.e., hiding the actual input) using purely CSS?

Answer:

Yes, you can achieve this effect using the experimental CSS selector -webkit-text-security:

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

In this CSS rule, -webkit-text-security and text-security target input elements with the class pw, specifying that the input should display disc characters (•) to obscure the user's input.

To demonstrate, consider the following HTML code:

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

<button onclick="this.previousElementSibling
.classList.toggle('pw')">Toggle '•'</button></code>

When you interact with this element, you will notice a toggle button that switches between displaying the input as plain text and obscuring it with disc characters.

The above is the detailed content of Can I Style a Text Input to Mimic a Password Field Using CSS?. For more information, please follow other related articles on the PHP Chinese website!