Cara gaya dropdown pilih dalam html

Gunakan CSS asas untuk menambah fon, sempadan, sudut bulat dan anak panah tersuai untuk serasi, tetapi beberapa penyemak imbas masih mengekalkan gaya asli; 2. Jika anda perlu mengawal gaya penuh, anda boleh menggunakan JavaScript dan Div untuk membina menu drop-down adat untuk mencapai kandungan yang kaya seperti animasi dan ikon; 3. Adalah disyorkan untuk menggunakan perpustakaan seperti Select2, Choices.js atau React Select untuk dengan cepat mencapai kotak drop-down yang indah dan boleh diakses; 4.

Penggabungan A <select></select> dropdown dalam HTML boleh menjadi rumit kerana elemen bentuk asli diberikan secara berbeza di seluruh pelayar dan sistem operasi. Walaupun anda boleh memohon CSS asas untuk menukar warna, fon, dan padding, penyesuaian penuh (seperti menukar ikon anak panah atau menambah sempadan tersuai) memerlukan beberapa penyelesaian. Inilah cara untuk mendekati dengan berkesan.

1. Gaya CSS Asas (Mudah dan Sambungan Sambungan)

Anda boleh gaya elemen <select></select> dengan CSS standard. Ini berfungsi dengan baik dalam kebanyakan kes dan mengekalkan kebolehcapaian dan fungsi.

 <pilih class = "custom-pilih">
  <opsyen nilai = "Option1"> Option 1 </option>
  <opsyen nilai = "option2"> opsyen 2 </option>
  <opsyen nilai = "opsyen3"> opsyen 3 </option>
</pilih>

 .custom-pilih {
  saiz font: 16px;
  Padding: 10px;
  Sempadan: 2px pepejal #ccc;
  Radius sempadan: 8px;
  latar belakang warna: putih;
  Warna: #333;
  Lebar: 200px;
  Penampilan: Tiada; / * Membuang gaya lalai */
  -Webkit-appearing: Tiada;
  -Moz-Penampilan: Tiada;
  Kedudukan: Relatif;
  imej latar belakang: url (&#39;Data: imej/svg xml; utf8, <svg fill = "#333" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 10 6"
  Latar Belakang berulang: tidak berulang;
  Latar Belakang-kedudukan: Pusat 10PX kanan;
  Latar Belakang: 12px;
  Padding-Right: 30px;
}

• appearance: none yang menghilangkan gaya OS khusus lalai.
• Gunakan imej latar belakang (inline SVG adalah mudah) untuk menggantikan anak panah dropdown lalai.
• Tambah padding untuk membuat ruang untuk anak panah adat.

Nota: Walaupun dengan appearance: none , sesetengah pelayar (terutamanya safari mudah alih) masih menunjukkan kawalan asli. Untuk kawalan penuh, anda memerlukan penyelesaian tersuai.

2. Dropdown tersuai sepenuhnya menggunakan JavaScript dan Divs

Jika anda memerlukan kawalan reka bentuk yang sempurna (contohnya, pilihan tersuai, animasi, ikon), ganti asli <select> dengan dropdown tersuai yang dibina dari div S dan JavaScript.

 <div class = "custom-dropdown">
  <div class = "dropdown-header" id = "dropdown-toggle"> Pilih pilihan </div>
  <ul class = "dropdown-options" id = "dropdown-options" style = "Display: none;">
    <li data-nilai = "1"> pilihan 1 </li>
    <li data-nilai = "2"> pilihan 2 </li>
    <li data-nilai = "3"> pilihan 3 </li>
  </ul>
</div>

 .Custom-Dropdown {
  Kedudukan: Relatif;
  Lebar: 200px;
  font-family: arial, sans-serif;
}

.dropdown-header {
  Padding: 10px;
  Sempadan: 2PX Solid #007BFF;
  Radius sempadan: 8px;
  latar belakang warna: putih;
  kursor: penunjuk;
  Teks-Align: Kiri;
}

.dropdown-options {
  Senarai gaya: Tiada;
  Margin: 0;
  Padding: 0;
  Sempadan: 1px pepejal #ddd;
  Border-Top: Tiada;
  Sempadan-radius: 0 0 8px 8px;
  Latar Belakang: Putih;
  Kedudukan: Mutlak;
  Lebar: 100%;
  Z-indeks: 1000;
  Max-Height: 200px;
  limpahan-y: auto;
}

.dropdown-options li {
  Padding: 10px;
  kursor: penunjuk;
}

.dropdown-options li: hover {
  latar belakang warna: #f0f0f0;
}

 const toggle = document.getElementById ('dropdown-toggle');
const options = document.getElementById ('dropdown-options');
const allOptions = options.QuerySelectorAll ('li');

toggle.addeventListener ('klik', () => {
  const isVisible = options.style.display === 'block';
  options.style.display = isvisible? 'Tiada': 'Blok';
});

allOptions.foreach (option => {
  option.adDeventListener ('klik', () => {
    toggle.TextContent = option.TextContent;
    options.style.display = 'none';
    // secara opsyen mencetuskan peristiwa perubahan atau mengemas kini input tersembunyi
  });
});

// Tutup jatuh turun semasa mengklik di luar
document.addeventListener ('klik', (e) => {
  jika (! e.target.closest ('. custom-dropdown')) {
    options.style.display = 'none';
  }
});

Kaedah ini memberi anda kawalan visual penuh dan membolehkan kandungan yang kaya (imej, ikon, dan lain -lain) dalam pilihan.

3. Gunakan rangka kerja CSS atau perpustakaan

Untuk pembangunan yang lebih cepat, pertimbangkan untuk menggunakan perpustakaan yang mengendalikan keserasian dan kebolehcapaian silang pelayar:

• Select2 -berasaskan jQuery, sangat disesuaikan.
• Pilihan.js - ringan, moden, tidak ada kebergantungan.
• React Select - Jika anda menggunakan React.
• CSS Tailwind -Gunakan dengan komponen tersuai untuk gaya pertama utiliti.

Contoh dengan pilihan.js :

 <script src = "https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">

<pilih id = "pilihan-pilih">
  <opsyen nilai = "1"> Apple </option>
  <opsyen nilai = "2"> pisang </option>
  <opsyen nilai = "3"> Orange </option>
</pilih>

<script>
  Pilihan Baru (&#39;#pilihan-pilih&#39;, {
    mencari: palsu,
    ItemSelectText: &#39;&#39;,
  });
</script>

Perpustakaan ini mengendalikan navigasi papan kekunci, kebolehcapaian (ARIA), dan gaya secara konsisten.

Petua utama

• Sentiasa pertimbangkan akses : pembaca skrin bergantung pada elemen <select></select> asli.
• Jika menggunakan dropdown tersuai, tambahkan peranan ARIA ( role="listbox" , aria-selected , dan lain-lain) dan menyokong navigasi papan kekunci (kekunci anak panah, enter).
• Ujian di Mobile-Pilihan asli sering mencetuskan pemetik terbina dalam peranti, yang biasanya lebih baik untuk UX.
• Elakkan lebih banyak gaya ke titik kebolehgunaan.

Pada asasnya, anda boleh melakukan gaya ringan dengan CSS, tetapi untuk kawalan penuh, pergi tersuai atau gunakan perpustakaan yang terbukti. Ini keseimbangan antara keperluan reka bentuk dan kebolehgunaan.

Atas ialah kandungan terperinci Cara gaya dropdown pilih dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!