Bagaimanakah saya boleh Menggayakan Input Teks untuk Kelihatan Seperti Medan Kata Laluan Menggunakan CSS?

Gaya Teks Input untuk Menyerupai Medan Kata Laluan Menggunakan CSS

Cabaran:

Banyak borang web termasuk medan input dengan " atribut type=text". Walaupun atribut ini membenarkan pengguna memasukkan teks yang boleh dilihat, mungkin lebih baik untuk menyembunyikan maklumat sensitif dengan memaparkan asterisk sebaliknya, seperti dalam medan input dengan atribut "type=password".

Penyelesaian dengan CSS:

CSS menyediakan penyelesaian untuk menangani cabaran ini. Sifat -webkit-text-security dan text-security menawarkan cara untuk menyembunyikan input teks dalam penyemak imbas:

Kod:

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

Pelaksanaan:

Gunakan kelas "pw" pada medan input:

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

Ciri Tambahan:

Untuk penyemak imbas yang tidak menyokong sifat ini, pertimbangkan untuk menyediakan pilihan sandaran atau menggunakan penyelesaian berasaskan JavaScript.

Keserasian Pelayar:

Sifat -webkit-text-security disokong dalam WebKit- pelayar berasaskan, manakala sifat keselamatan teks disokong dalam pelayar moden. Untuk keserasian IE8, sandaran CSS atau penyelesaian JavaScript disyorkan.

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