Bagaimanakah Saya Boleh Menyesuaikan Warna Latar Belakang Pilihan Terpilih dalam Elemen `` HTML?

Menggayakan Pilihan Terpilih dalam HTML <select> Elemen

Dalam borang HTML, elemen menyediakan senarai juntai bawah pilihan untuk pemilihan pengguna. Secara lalai, pilihan yang dipilih muncul dalam latar belakang biru. Artikel ini meneroka cara untuk menyesuaikan warna latar belakang pilihan yang dipilih menggunakan CSS dan JavaScript.

Pendekatan CSS

Malangnya, tiada sifat CSS yang wujud untuk mengubah suai latar belakang warna pilihan yang dipilih dalam unsur. Walau bagaimanapun, anda boleh mencipta elemen pilihan tersuai menggunakan CSS dan HTML untuk mencapai ini:

<div class="custom-select">
  <select>

.custom-select {
  position: relative;
  width: 200px;
}

.custom-select select {
  display: none;
}

.custom-select-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-select:hover .custom-select-overlay {
  opacity: 0.5;
}

.custom-select select:focus + .custom-select-overlay {
  opacity: 1;
}

Pendekatan JavaScript

Menggunakan JavaScript, anda boleh memanipulasi DOM terus untuk menukar warna latar belakang pilihan yang dipilih semasa pemilihannya:

<select>

var select = document.getElementById('mySelect');

select.addEventListener('change', function() {
  var options = this.children;
  for (var i = 0; i < options.length; i++) {
    options[i].style.backgroundColor = 'white';
  }
  this.children[this.selectedIndex].style.backgroundColor = 'red';
});

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