Bagaimana untuk Mencipta Input Seperti Kata Laluan dengan Asterisk Hanya Menggunakan CSS?

Jenis Input Gaya=Teks Seperti Jenis=Kata Laluan

Soalan:

Bagaimana anda boleh ubah suai elemen input dengan type=text untuk memaparkan asterisk seperti input kata laluan menggunakan CSS sahaja?

Penyelesaian:

Walaupun sifat pembentangan sahaja isu ini, CSS sahaja boleh mencapai kesan ini untuk pelayar moden:

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

Gunakan CSS ini pada elemen input dengan kelas "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>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Input Seperti Kata Laluan dengan Asterisk Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!