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

iphone css ipad mobile-safari mobile-webkit 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