Bagaimana untuk Menyesuaikan Penggayaan Butang Input pada Peranti iOS dan Mengatasi Penampilan Lalai?

Mengatasi Penggayaan Butang Input Lalai pada Peranti iOS

Menggayakan butang input dengan CSS memberikan cabaran unik pada peranti iOS, kerana gaya lalai Mac mengatasi reka bentuk tersuai. Untuk menangani perkara ini, pertimbangkan untuk menggunakan -webkit-appearance: none; harta benda. Sifat ini membenarkan anda menghapuskan penggayaan Mac lalai dan menggunakan CSS tersuai anda sebaliknya.

Pilihan Tambahan untuk Penyesuaian Butang iOS

Selain menggunakan -webkit-appearance: none; , anda boleh meneroka pendekatan alternatif untuk mencapai penggayaan yang anda inginkan:

• Gunakan sifat [-moz-appearance]: Untuk Firefox dan lain-lain berasaskan Mozilla pelayar pada iOS, anda boleh menggunakan -moz-appearance: none; untuk mencapai kesan yang sama seperti -webkit-appearance: none;.
• Buat Hiperpautan sebagai Butang Hantar: Sebagai penyelesaian, anda boleh mencipta elemen hiperpautan yang berfungsi sebagai butang serah . Tambahkan atribut berikut pada tag: type="submit". Ini akan mengarahkan penyemak imbas untuk menyerahkan borang apabila pautan diklik, menyediakan elemen butang tersuai yang sejajar dengan penggayaan yang anda inginkan.

/* Remove default iOS styling */
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Apply custom styling */
input[type="submit"] {
  background-color: #33b5e5;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}