Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Pilihan <select> Terpilih dalam HTML?-tutorial css-php.cn

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>

Salin selepas log masuk

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

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

Salin selepas log masuk

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);

Salin selepas log masuk

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