iOS memaksa sudut membulat dan silau pada input

94

Perangkat iOS menambahkan banyak gaya yang mengganggu pada input formulir, terutama pada input [type = submit]. Di bawah ini ditampilkan formulir pencarian sederhana yang sama di browser desktop, dan di iPad.

Desktop:

Desktop

iPad:

iPad

Input [type = text] menggunakan sisipan bayangan kotak CSS dan saya bahkan menentukan -webkit-border-radius: none; yang tampaknya diganti. Warna dan bentuk tombol input [type = submit] saya menjadi benar-benar terlarang di iPad. Adakah yang tahu apa yang dapat saya lakukan untuk memperbaikinya? Terima kasih sebelumnya.

css ios forms anorganik
sumber
4
-webkit-penampilan: tidak ada; Membantu menghilangkan sebagian besar masalah, tetapi tetap tidak menghilangkan jarak antara dua elemen atau sudut yang membulat. Jadi bantuan apa pun tentang itu akan sangat dihargai. Terima kasih.
inorganik
2
Anda menentukan -webkit-border-radius:none;apakah Anda menentukan border-radius:none;?
Rigel Glen
7
Menentukan -webkit-appearance:nonedan -webkit-border-radius:0melakukan trik di iOS untuk saya!
Primus202

Jawaban:

184

Versi yang saya kerjakan adalah:

input {
    -webkit-appearance: none;
}

Di beberapa versi browser webkit, Anda mungkin juga dihadapkan pada keadaan yang border-radiusmasih ada. Atur ulang dengan yang berikut:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Hal ini dapat diperluas untuk berlaku untuk semua webkit bergaya formkomponen seperti input, select, buttonatau textarea.

Mengacu pada pertanyaan awal, Anda tidak akan menggunakan nilai 'tidak ada' saat menghapus elemen css berbasis unit. Ketahuilah juga bahwa ini menyembunyikan kotak centang di Chrome, jadi mungkin gunakan sesuatu seperti input[type=text]atau input[type=submit], input[type=text]atau sebagai gantinya filter yang tidak menggunakan pengaturan sudut bulat seperti input:not([type=checkbox]), input:not([type=radio]).

marksyzm.dll
sumber
5
-webkit-penampilan: tidak ada; Sembunyikan kotak centang di Chrome - bukan solusi yang valid!
Nico Westerdale
2
-webkit-penampilan: tidak ada; berhasil! (-webkit-border-radius tidak diperlukan)
OZZIE
Poin yang bagus - tidak tergantung pada versi browser, saya telah menemukan, jadi itu hanya ada di sana untuk keamanan dari kegagalan. Saya akan mengedit posting untuk relevansi.
marksyzm
3
input: not ([type = "checkbox"]) adalah cara yang lebih baik untuk menghindari masalah di Chrome? Meskipun tidak akan berfungsi di IE <= 8, tetapi sekali lagi, bukan itu yang Anda coba perbaiki.
Robin French
Menggunakan input:not([type=checkbox]), input:not([type=radio])berarti gaya tersebut berlaku untuk semua tombol di Safari, karena setiap tombol memenuhi salah satu dari dua ketentuan tersebut. Sebagai gantinya, saya menggunakan input[type=submit], input[type=text].
miguelmorin
17

Anda dapat menghapus beberapa bentuk webkit, masukan, dll. Gaya dengan ini:

input, textarea, select {
   -webkit-appearance: none;
}
nick
sumber
Itu masih perlu border-radius: 0;disetel ulang sepenuhnya, dan tidak menginginkan radius batas. Lain hanya mengatur border-radius.
Refilon
3

Untuk tombol kirim jangan gunakan:

<input type="submit" class="yourstylehere" value="submit" />

Alih-alih gunakan tag tombol:

<button type="submit" class="yourstylehere">Submit</button>

Ini berhasil untuk saya.

Robot Digital Gorilla
sumber
1
FWIW, baru saja mengalami masalah ini pada sebuah proyek, dan iPad 1 yang saya uji juga menambahkan gaya ke <button>tag. Jadi saya pikir Anda lebih baik menyelesaikan ini dengan CSS secara langsung.
neemzy
1

lihat ke normalize.css

Ada demo di mana Anda dapat menguji elemen formulir dan melihat tampilannya di iOS. Ada beberapa properti berorientasi webkit.

Rdpi
sumber
1

Inilah yang saya gunakan dalam proyek saya

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}
Waqar Alamgir
sumber
0

Anda juga mendapatkan masalah ini di beberapa browser jika Anda memiliki yang berikut ini:

<a class="btn btn-primary" href="#" type="button">Link</a>

dari pada:

<a class="btn btn-primary" href="#" role="button">Link</a>

Hal ini dapat terjadi jika Anda mengubah elemen input untuk elemen anker dan lupa untuk perubahan typeke role.

Saya mengalami masalah ini di Chrome dan Safari di iPad saya.

Beladau
sumber