Bagaimanakah Saya Boleh Menggayakan Medan Input Kosong dengan Boleh Dipercayai dengan CSS?

Menggayakan Medan Input Kosong dengan CSS

Satu keperluan penggayaan biasa ialah menggunakan peraturan khusus untuk mengosongkan medan input. Ini boleh berguna untuk memberikan isyarat visual kepada pengguna, seperti teks pemegang tempat atau sempadan berwarna. Walau bagaimanapun, menggunakan pemilih input[value=""] untuk menyasarkan input kosong mungkin tidak berfungsi seperti yang dimaksudkan.

Dalam penyemak imbas moden, kelas pseudo yang ditunjukkan oleh pemegang tempat menyediakan cara yang lebih dipercayai untuk menggayakan medan input kosong . Kelas pseudo ini menyasarkan medan input yang teks pemegang tempat kelihatan pada masa ini, menunjukkan bahawa medan input kosong.

Untuk menggunakan sempadan merah pada medan input kosong, anda boleh menggunakan CSS berikut:

input:placeholder-shown {
  border: 1px solid red;
}

Perhatikan bahawa anda juga mesti menetapkan atribut pemegang tempat pada medan input dalam HTML:

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

Chrome memerlukan sekurang-kurangnya aksara ruang sebagai nilai pemegang tempat untuk mencetuskan kelas pseudo yang ditunjukkan oleh pemegang tempat : Ini memastikan bahawa medan input secara teknikalnya tidak kosong sementara masih membenarkan input pengguna.

Dengan menggunakan :placeholder-shown, anda boleh mencipta penggayaan tersuai yang menyasarkan medan input kosong dan memberikan maklum balas pengguna yang dipertingkatkan.

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