Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menggayakan Medan Input Berdasarkan Sama ada Ia Mengandungi Teks Menggunakan CSS Sahaja?

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

Mary-Kate Olsen
Lepaskan: 2024-12-15 22:14:14
asal
460 orang telah melayarinya

How Can I Style Input Fields Based on Whether They Contain Text Using Only CSS?

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan