cari

Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Pilihan Terpilih dalam HTML?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-07 01:20:13216semak imbas

How Can I Change the Background Color of a Selected <select> Pilihan dalam HTML? Pilihan dalam HTML? " />

Penggayaan CSS untuk HTML <select> Warna Latar Belakang Pilihan Terpilih

Dalam HTML, elemen <select> digunakan untuk membuat senarai juntai bawah untuk pemilihan pengguna Secara lalai, apabila pilihan dipilih, warna latar belakangnya menjadi biru Walau bagaimanapun, anda mungkin ingin menyesuaikan warna ini menggunakan CSS.

Sifat CSS "selected-color" tidak wujud untuk menggayakan warna latar belakang pilihan <select> sahaja mungkin tidak mencukupi untuk tugasan ini.

Penyelesaian Javascript

Pendekatan yang lebih sesuai melibatkan penggunaan gabungan HTML, CSS dan Javascript untuk mencapai hasil yang dikehendaki. Begini caranya:

<select>

Dalam kod HTML di atas, kami telah mencipta elemen dengan warna latar belakang merah yang telah ditetapkan.

select {
    color: black; /* Default color for options */
}

CSS ini menetapkan warna lalai semua dalam hitam.

var sel = document.getElementById('mySelect');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
    selected.style.color = 'red';
}, false);

Dalam kod Javascript ini, kami menambah pendengar acara pada elemen unsur dan menetapkan warnanya kepada putih. Kemudian, ia menetapkan warna pilihan yang dipilih kepada merah.

Dengan menggabungkan HTML, CSS dan Javascript, anda boleh mengatasi warna latar belakang biru lalai bagi <select> pilihan dan sesuaikan mengikut keinginan anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Pilihan