Bagaimanakah Saya Boleh Menggayakan Medan Input Kosong dengan CSS Menggunakan `:placeholder-shown`?

Menggayakan Medan Input Kosong dengan CSS: Panduan Praktikal

Menggayakan medan input kosong menimbulkan cabaran dalam CSS, kerana memadankan nilai kosong dengan common value="" pemilih boleh jadi tidak boleh dipercayai. Untuk menangani situasi ini dengan berkesan, kami menyelidiki penyelesaian yang inovatif dan berkesan.

Dalam penyemak imbas moden, kelas pseudo yang ditunjukkan oleh :tempat letak datang untuk menyelamatkan. Tidak seperti ::placeholder, yang menyasarkan teks pemegang tempat, :placeholder-shown secara khusus memilih medan input kosong. Ini menyediakan cara yang tepat untuk menggunakan gaya apabila medan tersebut tidak mempunyai sebarang input pengguna.

Untuk menggambarkan pendekatan elegan ini, pertimbangkan peraturan CSS berikut:

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

Untuk menggunakan peraturan CSS ini berkesan, adalah penting untuk diingat bahawa medan input mesti mempunyai atribut pemegang tempat. Selain itu, dalam penyemak imbas Chrome, memastikan bahawa aksara ruang hadir dalam atribut pemegang tempat adalah penting untuk kefungsian yang betul. Ini menjamin bahawa kelas pseudo yang ditunjukkan oleh pemegang tempat dicetuskan seperti yang dijangkakan, walaupun medan input pada mulanya kelihatan kosong kepada pengguna.

Berikut ialah contoh untuk menunjukkan pelaksanaan:

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

Kesimpulannya, dengan memanfaatkan kuasa :placeholder-shown, kami memperoleh keupayaan untuk menggayakan medan input kosong dalam CSS dengan mudah. Kelas pseudo yang inovatif ini menghapuskan batasan pemilih value="", memperkasakan pembangun untuk mencipta borang mesra pengguna dengan mudah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Medan Input Kosong dengan CSS Menggunakan `:placeholder-shown`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!