Bolehkah saya Menggayakan Input Teks untuk Meniru Medan Kata Laluan Menggunakan CSS?

Menggayakan Input Teks untuk Menyerupai Medan Kata Laluan

Soalan:

Adakah mungkin untuk membuat elemen input dengan type= "teks" kelihatan sama dengan satu dengan type="kata laluan" (iaitu, menyembunyikan input sebenar) menggunakan CSS semata-mata?

Jawapan:

Ya, anda boleh mencapai kesan ini menggunakan pemilih CSS eksperimen -webkit-text-security:

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

Dalam peraturan CSS ini, elemen input sasaran -webkit-text-security dan text-security dengan kelas pw, menyatakan bahawa input hendaklah memaparkan aksara cakera (•) untuk mengaburkan input pengguna.

Untuk menunjukkan, pertimbangkan kod HTML berikut:

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

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

Apabila anda berinteraksi dengan elemen ini, anda akan melihat butang togol yang bertukar antara memaparkan input sebagai teks biasa dan mengaburinya dengan aksara cakera.

Atas ialah kandungan terperinci Bolehkah saya Menggayakan Input Teks untuk Meniru Medan Kata Laluan Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!