Cara menggunakan CSS untuk mencipta kesan gaya tersuai untuk senarai juntai bawah

Bagaimana menggunakan CSS untuk mencipta kesan gaya tersuai untuk senarai drop-down dalam reka bentuk web, senarai dropdown (senarai dropdown) adalah salah satu elemen interaktif biasa. memudahkan operasi pengguna. Walau bagaimanapun, gaya senarai lungsur lalai penyemak imbas mungkin tidak memenuhi keperluan reka bentuk, jadi anda perlu menggunakan CSS untuk menetapkan gaya tersuai. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencipta kesan gaya tersuai untuk senarai juntai bawah, dengan contoh kod khusus.

Buat struktur HTML asas

1. Pertama, kita perlu mencipta struktur HTML asas, yang mengandungi elemen dan satu set elemen

Seterusnya, mari tambahkan beberapa gaya asas pada elemen Contohnya, untuk menetapkan lebar, ketinggian, fon, warna latar belakang, dsb., kodnya adalah seperti berikut:

<select class="custom-select">
  <option value="option1">选项一</option>
  <option value="option2">选项二</option>
  <option value="option3">选项三</option>
</select>

Sembunyikan senarai lungsur turun asli

Untuk mencapai kesan gaya tersuai, kita perlu sembunyikan senarai lungsur turun asli. Kesan penyembunyian silang pelayar boleh dicapai dengan menetapkan gaya elemen kepada "penampilan: tiada;" dan "-webkit-penampilan: tiada;".

.custom-select {
  width: 200px;
  height: 30px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

Tambah anak panah lungsur

Senarai lungsur biasanya mempunyai anak panah lungsur untuk menunjukkan bahawa pilihan boleh dikembangkan. Kita boleh menggunakan elemen pseudo :before dalam CSS untuk menambah anak panah. Kodnya adalah seperti berikut:

.custom-select {
  appearance: none;
  -webkit-appearance: none;
}

Sesuaikan gaya pilihan yang dikembangkan

Apabila anda mengklik anak panah lungsur untuk mengembangkan pilihan, anda perlu menyesuaikan gaya pilihan. Biasanya, kami akan menetapkan warna latar belakang, warna teks, sempadan dan gaya pilihan lain agar selaras dengan gaya reka bentuk keseluruhan.

.custom-select:before {
  content: "";
  position: absolute;
  top: 12px;
  right: 10px;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
  pointer-events: none;
}

Tambahkan kesan interaktif

Akhir sekali, tambahkan kesan interaktif pada senarai juntai bawah supaya ia menukar gaya apabila tetikus dilegar dan dipilih. Kita boleh menggunakan :hover pseudo-class dan :selected pseudo-class dalam CSS untuk mencapai ini.

.custom-select option {
  background-color: #fff;
  color: #333;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

6. Melalui langkah di atas, kami boleh melaksanakan senarai juntai bawah gaya tersuai. Kod lengkap adalah seperti berikut:

.custom-select:hover {
  border-color: #999;
}

.custom-select option:hover {
  background-color: #f5f5f5;
}

.custom-select option:selected {
  background-color: #e0e0e0;
}

Melalui langkah di atas, kami berjaya menggunakan CSS untuk mencipta kesan gaya tersuai untuk senarai juntai bawah. Anda boleh mengubah suai gaya untuk memenuhi keperluan reka bentuk khusus anda. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta kesan gaya tersuai untuk senarai juntai bawah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!