Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich eine passwortähnliche Eingabe mit Sternchen nur mit CSS?

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

DDD
Freigeben: 2024-10-26 21:32:03
Original
219 Leute haben es durchsucht

How to Create a Password-Like Input with Asterisks Using Only 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage