Bagaimanakah Saya Boleh Menggayakan Elemen dengan CSS Sambil Mengekalkan Keserasian Merentas Pelayar?

Menggayakan Elemen dengan CSS: Keserasian Merentas Pelayar

Menggayakan elemen dalam elemen menggunakan CSS sahaja boleh mencabar kerana isu keserasian merentas penyemak imbas. Walau bagaimanapun, terdapat beberapa teknik yang boleh digunakan untuk mencapai hasil yang diingini.

WebKit dan Firefox (harta rupa)

Sehingga Firefox 35, kedua-dua penyemak imbas WebKit dan Firefox benarkan penggunaan sifat rupa untuk mengalih keluar penggayaan lalai bagi unsur. Dengan menetapkan sifat penampilan kepada tiada, anda boleh menyembunyikan butang lungsur turun dan mencipta gaya tersuai untuk pilihan.

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

IE 11 (::-ms-expand)

Untuk keserasian IE 11, anda boleh menggunakan ::-ms-expand pseudo-element untuk menyembunyikan dropdown lalai butang.

select::-ms-expand {
  display: none;
}

Penyelesaian Lama (Menggunakan JavaScript)

Sebelum pengenalan sifat penampilan, tiada cara untuk menggayakan elemen menggunakan CSS tulen. Sebagai penyelesaian, perpustakaan JavaScript boleh digunakan untuk membuat menu lungsur tersuai yang meniru rupa elemen.

Salah satu pustaka JavaScript sebegitu ialah jQuery, yang menyediakan pemalam selectmenu:

$("select").selectmenu();

Pemalam ini membolehkan anda membuat dropdown tersuai yang boleh digayakan menggunakan CSS.

Nota:

Adalah penting untuk ambil perhatian bahawa menggunakan JavaScript untuk menggayakan elemen boleh memberi kesan kebolehaksesan untuk pengguna yang bergantung pada pembaca skrin atau teknologi bantuan lain. Oleh itu, adalah disyorkan untuk menggunakan sifat penampilan apabila boleh.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen dengan CSS Sambil Mengekalkan Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!