Bagaimanakah Saya Boleh Menggayakan Medan Input Kosong Menggunakan CSS?

Penggayaan Medan Input Kosong dalam CSS

Mencari medan input berdasarkan keadaan kosongnya memerlukan pendekatan khusus dalam CSS. Walaupun pemilih input[value=""] yang disediakan tidak akan berfungsi dalam penyemak imbas moden, terdapat penyelesaian yang tersedia.

Enter :placeholder-shown. Kelas pseudo ini secara khusus menyasarkan medan input kosong, membolehkan anda menggunakan gaya yang akan dialih keluar setelah medan input mengandungi nilai. Contohnya:

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

Adalah penting untuk ambil perhatian bahawa atribut pemegang tempat harus ditetapkan dalam HTML untuk pemilih yang ditunjukkan oleh pemegang tempat berfungsi. Selain itu, Chrome memerlukan sekurang-kurangnya aksara ruang untuk hadir sebagai nilai pemegang tempat.

Pastikan anda memasukkan atribut pemegang tempat dengan ruang seperti berikut:

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

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