Bagaimanakah Saya Boleh Menyesuaikan Gaya Anak Panah Jatuh Merentasi Pelayar Berbeza?

Menyesuaikan Gaya Anak Panah dalam Senarai Drop-Down

Pengenalan:

Dalam usaha untuk meningkatkan daya tarikan visual antara muka web, pembangun kerap berusaha untuk menyesuaikan penampilan anak panah elemen terpilih. Walau bagaimanapun, keserasian merentas penyemak imbas selalunya memberikan cabaran dalam mencapai reka bentuk yang konsisten.

Isu:

Apabila cuba menggantikan anak panah lalai dalam elemen pilih dengan imej tersuai , hasilnya berbeza merentas pelayar. Dalam Chrome, penyesuaian berfungsi, tetapi dalam Firefox dan Internet Explorer 9, anak panah lalai kekal kelihatan.

Punca:

Isu ini berpunca daripada pemaparan khusus penyemak imbas bagi anak panah elemen pilih. Walaupun Chrome secara asli menyokong penyembunyian anak panah lalai, Firefox dan IE9 tidak.

Penyelesaian:

Untuk memastikan keserasian merentas penyemak imbas, penyelesaian diperlukan. Kod CSS berikut boleh dilaksanakan:

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

Penjelasan:

Kod ini mengatasi penampilan lalai penyemak imbas bagi anak panah elemen pilih. Sifat -moz-appearance adalah khusus untuk Firefox, -webkit-appearance untuk Safari dan Chrome, dan penampilan ialah sifat generik untuk semua penyemak imbas moden. Dengan menetapkan rupa kepada tiada, anak panah lalai ditekan dengan berkesan.

Pertimbangan Tambahan:

Dalam Firefox versi 35 dan lebih awal, sifat -moz-appearance tidak disokong . Sebagai penyelesaian, gabungan jQuery dan CSS boleh digunakan. Untuk butiran lanjut, rujuk kepada penyelesaian seperti "Penyesuaian Anak Panah Turun dalam Firefox" jsfiddle.

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