Bagaimanakah Saya Boleh Menyesuaikan Gaya Anak Panah dalam Input Pilihan Merentasi Pelayar Berbeza?

Menyesuaikan Gaya Anak Panah dalam Input Pilihan

Tugas di tangan ialah untuk menggantikan imej anak panah lalai dalam input pilih dengan gambar tersuai. Walau bagaimanapun, usaha untuk melaksanakan penyesuaian ini hanya berjaya dalam Chrome.

Kod HTML dan CSS yang disediakan melibatkan penciptaan elemen div dengan dimensi yang sama dengan input pilih dan menetapkan latar belakangnya sebagai telus. Imej anak panah yang dikehendaki disertakan sebagai latar belakang di penjuru atas sebelah kanan div.

Malangnya, Firefox dan IE9 memaparkan anak panah asal dan bukannya imej tersuai. Untuk menangani perkara ini, pertimbangkan untuk menggunakan pengubahsuaian CSS berikut:

.styled-select select {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
}

Kod ini, apabila digunakan pada elemen pilihan, mengalih keluar gaya lalai penyemak imbas, termasuk anak panah. Walau bagaimanapun, perlu diingat bahawa Firefox tidak menyokong sepenuhnya fungsi ini sehingga versi 35.

Pendekatan alternatif melibatkan penggunaan JavaScript. Penyelesaian telah ditunjukkan dalam jsfiddle ini: https://jsfiddle.net/b5gu6306/

Ringkasnya, untuk menyesuaikan gaya anak panah dalam input pilih, ubah suai penampilan elemen pilih menggunakan kod CSS yang dicadangkan. Untuk versi Firefox sebelum 35, pertimbangkan untuk melaksanakan penyelesaian JavaScript yang disediakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Gaya Anak Panah dalam Input Pilihan Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!