Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Pilihan Kotak Pilih Menggunakan CSS?

Cara Menukar Warna Latar Belakang Pilihan Kotak Pilihan

Apabila anda mengklik kotak pilih, ia memaparkan senarai pilihan. Secara lalai, warna latar belakang pilihan ini adalah sama dengan warna latar belakang kotak pilihan itu sendiri. Walau bagaimanapun, anda boleh menggunakan CSS untuk menukar warna latar belakang pilihan.

Untuk melakukan ini, anda perlu menggunakan sifat warna latar belakang pada elemen pilihan, bukan elemen pilih. Contohnya, kod CSS berikut akan menukar warna latar belakang semua pilihan dalam kotak pilihan kepada hitam:

select option {
  background-color: black;
}

Jika anda ingin menggayakan setiap pilihan secara individu, anda boleh menggunakan pemilih atribut CSS. Sebagai contoh, kod CSS berikut akan menukar warna latar belakang pilihan pertama dalam kotak pilihan kepada merah, pilihan kedua kepada hijau dan pilihan ketiga kepada biru:

select option:first-child {
  background-color: red;
}

select option:nth-child(2) {
  background-color: green;
}

select option:nth-child(3) {
  background-color: blue;
}

Anda juga boleh menggunakan yang berbeza atribut kelas untuk setiap elemen, jika dikehendaki. Sebagai contoh, kod CSS berikut akan menukar warna latar belakang semua pilihan dalam kotak pilihan dengan pilihan kelas-1 kepada merah dan semua pilihan dengan pilihan kelas-2 kepada hijau:

.option-1 {
  background-color: red;
}

.option-2 {
  background-color: green;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Pilihan Kotak Pilih Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!