Bagaimanakah Saya Boleh Menggayakan Medan Input Kosong dengan CSS dan Mengalih Keluar Gaya Setelah Input Pengguna?

Menyasarkan Medan Input Kosong dengan CSS

Soalan:

Bagaimana anda boleh menggunakan gaya pada medan input kosong, memastikan ia hilang apabila pengguna masuk teks?

Jawapan:

Dalam penyemak imbas moden, anda boleh menggunakan kelas pseudo yang ditunjukkan oleh pemegang tempat untuk menyasarkan medan input kosong. Berikut ialah kod CSS:

input:placeholder-shown {
  border: 1px solid red; /* Red border only when the input is empty */
}

Untuk mendayakan kesan ini, anda perlu menambah atribut pemegang tempat pada medan input dalam HTML. Perlu diingat bahawa Chrome memerlukan sekurang-kurangnya aksara ruang sebagai nilai untuk pemegang tempat.

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Medan Input Kosong dengan CSS dan Mengalih Keluar Gaya Setelah Input Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!