Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Lumpuhkan Elemen Input Bulat dalam iPhone/Safari?

Bagaimanakah Saya Boleh Lumpuhkan Elemen Input Bulat dalam iPhone/Safari?

Barbara Streisand
Lepaskan: 2024-10-30 16:16:26
asal
382 orang telah melayarinya

How Can I Disable Rounded Input Elements in iPhone/Safari?

Melumpuhkan Elemen Input Bulat dalam iPhone/Safari

Safari pada peranti iOS cenderung untuk memaparkan medan input teks dengan gaya bulat, yang mungkin tidak sentiasa selaras dengan reka bentuk yang dimaksudkan. Untuk menangani isu ini, berikut ialah cara untuk mengarahkan Safari supaya tidak membundarkan medan input dan menjadikannya segi empat tepat:

Untuk iOS 5 dan Kemudian:

1. Gaya CSS:

Gunakan peraturan CSS jejari sempadan: 0; untuk mengalih keluar penjuru bulat pada semua medan input.

2. Penampilan WebKit:

Untuk medan input carian secara khusus, tetapkan sifat -webkit-appearance kepada tiada.

<code class="css">input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}</code>
Salin selepas log masuk

Untuk Versi Safari Legacy:

WebKit Rupa:

Dalam versi Safari yang lebih lama, gunakan -webkit-appearance: tiada sifat untuk semua medan input untuk mengalih keluar penggayaan bulat.

<code class="css">input {
  -webkit-appearance: none;
}</code>
Salin selepas log masuk

Nota:

  • Jejari -webkit-sempadan: 0; sifat boleh digunakan untuk menyasarkan medan input pada iOS sahaja, tetapi ia mungkin akan dihentikan secara berperingkat pada masa hadapan.
  • Kaedah pilihan adalah untuk menormalkan sudut bulat merentas platform menggunakan sifat jejari sempadan standard dan -webkit- sifat penampilan untuk Safari sahaja.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Lumpuhkan Elemen Input Bulat dalam iPhone/Safari?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan