Bagaimanakah Saya Boleh Menggayakan Pilihan Terpilih dalam Senarai Dropdown HTML Menggunakan CSS?

Menggayakan Pilihan Terpilih dalam Senarai Jatuh Turun Menggunakan CSS

Apabila bekerja dengan elemen pilih HTML, selalunya perlu menyesuaikan penampilan pilihan yang dipilih. Ini boleh dicapai melalui kelas pseudo CSS :selected, sama dengan kelas pseudo :checked untuk kotak pilihan dan butang radio.

Kelas pseudo :selected menyasarkan elemen pilihan yang sedang aktif atau dipaparkan dalam senarai juntai bawah . Ini membolehkan anda menggunakan penggayaan secara khusus pada pilihan yang dipilih, membezakannya daripada yang lain.

Walaupun persamaannya dengan :checked, kelas pseudo :selected tidak mewarisi sifat penggayaan yang sama. Terutamanya, menetapkan sifat warna mungkin tidak sentiasa disokong dalam semua penyemak imbas.

Walau bagaimanapun, kod CSS berikut boleh digunakan untuk menggayakan pilihan yang dipilih dengan warna latar belakang:

option:selected {
  background-color: red;
}

Ini kod akan menggunakan latar belakang merah pada pilihan yang dipilih pada masa ini, meningkatkan keterlihatannya dan memberikan maklum balas visual kepada pengguna.

Sebagai alternatif, anda juga boleh menggunakan :selected kelas pseudo untuk menyembunyikan pilihan yang dipilih daripada senarai juntai bawah itu sendiri. Ini boleh berguna untuk mempersembahkan senarai yang lebih ringkas atau diperkemas kepada pengguna:

option:checked {
  display: none;
}

Kod ini akan mengalih keluar pilihan yang dipilih daripada senarai yang boleh dilihat, membenarkan pengguna menumpukan pada pilihan yang selebihnya sahaja.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Pilihan Terpilih dalam Senarai Dropdown HTML Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!