Matikan pembulatan elemen input iPhone / Safari

374

Situs web saya ditampilkan dengan baik di browser iPhone / Safari, dengan satu pengecualian: Bidang input teks saya memiliki gaya bulat aneh yang tidak terlihat bagus sama sekali dengan bagian situs web saya yang lain.

Apakah ada cara untuk menginstruksikan Safari (melalui CSS atau metadata) untuk tidak membulatkan bidang input dan membuatnya persegi panjang seperti yang dimaksudkan?

html css iphone mobile-safari css-reset Alex
sumber
1
Saya bertanya-tanya mengapa NO reset CSS tampaknya mengandung aturan css yang super mudah. Ini braindead.
Toskan
1
Saya benar-benar membuat reset CSS berdasarkan eric meyer reset css 2 dengan tambahan yang diperlukan css Anda temukan dalam jawaban di sini. Ini tersedia di github: github.com/Jossnaz/JossiCssReset
Toskan
1
Hati-hati dengan -webkit-appearance: none;, saya pikir lebih baik untuk membatasi kondisi ini pada lingkup elemen input tertentu. Kalau tidak, bisa menyembunyikan elemen input radio jika Anda memilikinya di halaman.
quas

Jawaban:

659

Di iOS 5 dan yang lebih baru, good ol 'berhasil border-radius:

input {
    border-radius: 0;
}

Jika Anda hanya harus menghapus sudut bulat di iOS atau karena alasan tertentu tidak dapat menormalkan sudut bulat di seluruh platform, gunakan -webkit-border-radiusproperti awalan sebagai gantinya, yang masih didukung. Tentu saja perlu dicatat bahwa Apple dapat memilih untuk memberikan dukungan untuk properti yang diawali setiap saat, tetapi mengingat fitur CSS khusus platform lainnya, kemungkinan mereka akan tetap menggunakannya.

Pada versi lawas, Anda harus menyetel -webkit-appearance: none:

input {
    -webkit-appearance: none;
}
BoltClock
sumber
1
Pada iOS 5, ini hanya akan menghapus bayangan bagian dalam. Periksa jawaban Piyush untuk menghapus sudut membulat juga.
Jonathan Freeland
6
-webkit-appearancesebenarnya tidak ada hubungannya dengan bayangan bagian dalam dan sudut bulat. Jangan menggunakannya hanya untuk itu. css-infos.net/property/-webkit-appearance
Rudie
14
"Jika iOS ingin sudut dan bayangan membulat, biarkan pengguna iOS memilikinya": Itu benar-benar tidak dapat diterima dalam situasi saya, dan mungkin di sebagian besar lainnya juga.
coredumperror
2
!! Anda tidak boleh menggunakan metode ini, itu membuat kotak centang tampaknya tidak tersedia Karena ini, banyak pengguna situs saya tidak melanjutkan dalam perjanjian pembayaran. !!
synthresin
10
Untuk <input type="search">di iOS 10 saya masih dibutuhkan -webkit-appearance: none;.
Gabriel Smoljár
55

input -webkit-appearance: none; sendiri tidak bekerja.

Coba tambahkan -webkit-border-radius:0px;sebagai tambahan.

justadev
sumber
1
Saya memang perlu menambahkan -webkit-border-radiusatribut untuk <input type="text">menghapus sudut bulat di iOS 5.
Jonathan Freeland
Tidak perlu menambahkan px setelah 0
mintedsky
42

Ini adalah cara terbaik untuk menghapus bulat di iOS.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Catatan: Tolong jangan gunakan kode ini untuk Pilihan Pilih. Ini akan memiliki masalah pada pilih kami.

KoemsieLy
sumber
2
Saya telah menemukan bahwa menggunakan input[type]tampaknya melakukan trik untuk semua input.
JacobTheDev
11

Jawaban yang diterima membuat tombol radio menghilang di Chrome. Ini bekerja:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
François Romain
sumber
7

Berikut ini solusi lengkap untuk Kompas (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
Johansrk
sumber
14
Sekedar catatan, @include border-radius(0);mixin hanya tersedia jika Anda telah mendefinisikannya sendiri atau menggunakan kerangka kerja Compass, bukan hanya vanilla SASS.
waffl
Hanya sebuah catatan, jika Anda menggunakan SCSS, Anda mungkin harus menggunakan autoprefixer juga.
Christian
6

Bagi saya di iOS 5.1.1 pada iPhone 3GS saya harus menghapus gaya bidang pencarian dan mengaturnya sesuai gaya yang dimaksudkan

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

Melakukannya -webkit-border-radius: 0;sendiri tidak menghapus gaya asli. Ini juga untuk tampilan web pada aplikasi asli.

Chris Bernardi
sumber
5

Saya memiliki masalah yang sama tetapi hanya untuk tombol kirim. Diperlukan untuk menghapus bayangan bagian dalam dan sudut membulat -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
seanjacob
sumber
4

Jika Anda menggunakan normalize.css, stylesheet itu akan melakukan sesuatu seperti input[type="search"] { -webkit-appearance: textfield; }.

Ini memiliki spesifisitas yang lebih tinggi daripada pemilih kelas tunggal .foo, jadi ketahuilah bahwa Anda tidak dapat melakukannya dengan adil .my-field { -webkit-appearance: none; }. Jika Anda tidak memiliki cara yang lebih baik untuk mencapai kekhususan yang tepat, ini akan membantu:

.my-field { -webkit-appearance: none !important; }

Henrik N
sumber
4

Silakan Coba Yang Ini:

Coba Tambahkan inputCss seperti ini:

 -webkit-appearance: none;
       border-radius: 0;
Ivin Raj
sumber
3

Saya menggunakan radius perbatasan sederhana: 0; untuk menghapus sudut membulat untuk jenis input teks.

Jesse
sumber
0

Untuk merender tombol dengan benar di Safari dan browser lain, Anda harus memberikan gaya khusus untuk tombol-tombol tersebut selain mengatur tampilan webkit menjadi tidak ada, misalnya:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
CpnCrunch
sumber