CSS tombol rendering aneh di iPad / iPhone

222

Saya perhatikan bahwa jika saya menata tombol saya dengan CSS menggunakan jari-jari, warna dan garis batas, mereka terlihat bagus tetapi di iphone / ipad / ipod mereka terlihat mengerikan ... tidak boleh rendering yang sama seperti di Safari Desktop ??

masukkan deskripsi gambar di sini

— Francesco
sumber

kemungkinan duplikat styling css untuk tombol input di ipad / iphone

— skolima

Jawaban:

453

Ups! baru saja menemukan diri saya: tambahkan saja baris ini pada elemen yang Anda butuhkan

   -webkit-appearance: none;

— Francesco
sumber

aku mencintaimu, stackoverflow, dan @Francesco

— jahrichie

Cemerlang, dan di sini ada artikel bagus tentang itu dari trik CSS. Ini mencantumkan semua elemen lain yang diubah oleh WebKit dan Mozilla.

— Patrick

Kompas memiliki mixin untuk ini juga compass-style.org/reference/compass/css3/appearance

— Patrick Beeson

Saya berharap saya akan melakukan pencarian google ini 12 jam yang lalu ... Terima kasih.

— Elly Post

Benar benar hebat! belum pernah berpikir masalah seperti ini juga terjadi di iOS! Sekali lagi terima kasih banyak untuk ini!

— Saurabh Prajapati

Tambahkan kode ini ke file css:

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

Ini akan membantu.

— subindas pm
sumber

Bagus! Tombol kirim formulir sekarang terlihat sebagaimana mestinya di iPad saya

— peterkodermac

@peterkodermac jangan lupa menambahkan kelas induk CSS, jika tidak, ini dapat memengaruhi setiap bidang input.

— subindas pm

Jawaban di atas untuk tampilan webkit memang ajaib, tetapi tombolnya masih terlihat pucat / kusam dibandingkan dengan browser di perangkat lain / desktop. Saya juga harus mengatur opacity menjadi penuh (berkisar dari 0 hingga 1)

-webkit-appearance:none;
opactiy: 1

Setelah mengatur opacity, tombol tampak sama pada semua perangkat / emulator / desktop yang berbeda.

— Priyank Thakkar
sumber