Wie erstelle ich eine passwortähnliche Eingabe mit Sternchen nur mit CSS?

Stil Eingabetyp=Text wie Typ=Passwort

Frage:

Wie können Sie Ein Eingabeelement mit type=text so ändern, dass Sternchen wie bei einer Passworteingabe nur mit CSS angezeigt werden?

Lösung:

Trotz der reinen Präsentationsnatur dieses Problems ist CSS Allein kann dieser Effekt für moderne Browser erreicht werden:

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

Wenden Sie dieses CSS auf das Eingabeelement mit der Klasse „pw“ an:

<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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine passwortähnliche Eingabe mit Sternchen nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!