Bagaimanakah Saya Boleh Menyesuaikan Warna Latar Belakang Pilihan Kotak Pilihan dalam CSS?

Menyesuaikan Warna Latar Belakang Pilihan Kotak Pilihan

Apabila kotak pilihan diklik untuk memaparkan pilihannya, anda mungkin mahu menyesuaikan warna latar belakang pilihan tersebut. Untuk mencapai matlamat ini:

Pilih Elemen Pilihan:

Mulakan dengan menyasarkan elemen pilihan dalam kotak pilihan, bukan elemen pilih itu sendiri. Ini boleh dilakukan dengan menggunakan gaya untuk memilih pilihan dalam CSS anda:

select option {
  ...
}

Tetapkan Warna Latar Belakang:

Seterusnya, tetapkan sifat warna latar belakang untuk pilihan elemen kepada warna yang anda inginkan. Contohnya, jika anda mahukan latar belakang gelap:

select option {
  background-color: rgba(0, 0, 0, 0.3);
}

Gaya Pilihan Individu (Pilihan):

Jika anda ingin menggayakan pilihan individu secara berbeza, anda boleh menggunakan pemilih atribut CSS untuk menyasarkannya berdasarkan atribut nilai mereka. Contohnya, untuk memberikan warna latar belakang yang berbeza kepada setiap pilihan:

select option[value="1"] {
  background-color: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background-color: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background-color: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background-color: rgba(250, 250, 250, 0.3);
}

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