Bagaimanakah Saya Boleh Menggayakan Medan Input Berdasarkan Sama ada Ia Mengandungi Teks Menggunakan CSS Sahaja?

Mengenal pasti Teks dalam Medan Input Tanpa JavaScript

Dalam bidang penggayaan CSS, pengesanan kehadiran teks dalam elemen input boleh menjadi tugas yang membingungkan. Walau bagaimanapun, pemilih :empty pseudo-class dan [value=""] yang sukar difahami gagal menghasilkan hasil yang diingini.

Walau bagaimanapun, kelas pseudo yang ditunjukkan oleh :placeholder muncul sebagai penyelesaian yang berpotensi. Kelas pseudo ini menyasarkan elemen input yang mempunyai atribut pemegang tempat tanpa memaparkan teks pemegang tempat.

Cara Menggunakan :placeholder-shown

1. Pastikan input anda elemen mempunyai atribut pemegang tempat bukan kosong. Malah satu ruang boleh diterima.
2. Gunakan pemilih :not(:placeholder-shown) untuk menggayakan input apabila ia mengandungi teks.
3. Gunakan pemilih :placeholder-shown untuk menggayakan input apabila kosong.

Contohnya:

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

Kod ini akan mewarnakan input hijau apabila ia mengandungi teks dan merah apabila ia kosong.

Kaveat

Perhatikan bahawa teknik ini bergantung pada penggunaan atribut pemegang tempat. Oleh itu, ia mungkin tidak sesuai untuk senario di mana teks pemegang tempat tidak diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Medan Input Berdasarkan Sama ada Ia Mengandungi Teks Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!