İPhone / Safari giriş öğesi yuvarlamasını kapatma

374

Web sitem bir istisna dışında iPhone / Safari tarayıcısında iyi işliyor: Metin giriş alanlarım, web sitemin geri kalanıyla hiç iyi görünmeyen garip yuvarlak bir stile sahip.

Safari'ye (CSS veya meta veriler aracılığıyla) giriş alanlarını yuvarlamamayı ve istendiği gibi dikdörtgen yapmamayı bildirmenin bir yolu var mı?

— Alex
kaynak

1

HİÇBİR CSS sıfırlamasının neden bu süper kolay css kuralını içerdiğini merak ediyorum . Bu cesur.

— Toskan

1

Aslında eric meyer'in css reset 2'sine dayalı bir CSS resetleme oluşturdum. Github'da

— Toskan

1

Dikkatli olun -webkit-appearance: none;, bu koşulu belirli bir giriş öğesinin kapsamıyla sınırlamak daha iyi olur. Aksi takdirde, sayfada radyo giriş elemanlarını gizleyebilirsiniz.

— quas

659

İOS 5 ve sonrasında, iyi ol ' border-radiushile yapar:

input {
    border-radius: 0;
}

Yalnızca iOS'ta yuvarlatılmış köşeleri kaldırmanız gerekiyorsa veya başka bir nedenle platformlardaki yuvarlatılmış köşeleri normalleştiremiyorsanız, -webkit-border-radiusbunun yerine hala desteklenen önek özelliğini kullanın. Elbette Apple'ın ön ekli mülk için herhangi bir zamanda destek bırakmayı seçebileceğini unutmayın, ancak diğer platforma özgü CSS özelliklerinin şansını göz önünde bulundurarak, onları orada tutacaklar.

Eski sürümlerde -webkit-appearance: nonebunun yerine ayarlamanız gerekiyordu :

input {
    -webkit-appearance: none;
}

— BoltClock
kaynak

1

İOS 5'ten itibaren, bu sadece iç gölgeyi kaldıracaktır. Yuvarlatılmış köşeleri de kaldırmak için Piyush'ın cevabını kontrol edin.

— Jonathan Freeland

6

-webkit-appearanceaslında iç gölge ve yuvarlak köşelerle hiçbir ilgisi yoktur. Sadece bunun için kullanmayın. css-infos.net/property/-webkit-appearance

— Rudie

14

"IOS yuvarlatılmış köşeler ve gölgeler istiyorsa, IOS kullanıcılarının bunlara sahip olmasına izin verin": Bu benim durumumda ve muhtemelen diğerlerinin çoğunda da kabul edilemez.

— coredumperror

2

!! Bu yöntemi kullanmamalısınız, onay kutusunu kullanılamıyor gibi görünüyor Bu nedenle, site kullanıcılarımın çoğu ödeme sözleşmesinde ilerlemiyor. !!

— synthresin

10

For <input type="search">iOS'ta 10 Hala gerekli -webkit-appearance: none;.

— Gabriel Smoljár

55

input -webkit-appearance: none; tek başına çalışmaz.

-webkit-border-radius:0px;Ayrıca eklemeyi deneyin .

— justadev
kaynak

1

İOS 5'te yuvarlatılmış köşeleri kaldırmak için bu -webkit-border-radiusözelliği eklemem gerekiyordu<input type="text">

— Jonathan Freeland

0'dan sonra px eklemenize gerek yok

— mintedsky

42

IOS'ta yuvarlak olanı çıkarmanın en iyi yoludur.

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

Not: Lütfen Seçme Seçeneği için bu kodu kullanmayın. Seçimimizde sorun olacak.

— KoemsieLy
kaynak

2

Ben kullanmanın input[type]tüm girişler için hile yapıyor gibi buldum .

— JacobTheDev

11

Kabul edilen cevap, radyo düğmesi Chrome'da kayboluyor. Bu çalışıyor:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

— François Romain
kaynak

7

Compass (SCSS) için eksiksiz çözüm:

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

— Johansrk
kaynak

14

Sadece bir not, @include border-radius(0);mixin sadece kendiniz tanımladıysanız veya sadece vanilya SASS değil, Pusula çerçevesini kullanıyorsanız kullanılabilir.

— waffl

Sadece bir not, eğer SCSS kullanıyorsanız, muhtemelen otomatik düzeltici de kullanmalısınız.

— Christian

6

Bir iPhone 3GS'de iOS 5.1.1'de benim için bir arama alanının stilini temizlemeliyim ve onu tasarlanan stile ayarlamalıydım

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

-webkit-border-radius: 0;Yalnız yapmak yerli stili temizlemedi. Bu aynı zamanda yerel bir uygulamada bir web görünümü içindi.

— Chris Bernardi
kaynak

5

Aynı sorunu yaşadım ama sadece gönder düğmesi için. İç gölgeyi ve yuvarlatılmış köşeleri çıkarmak için gereklidir -

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

— seanjacob
kaynak

4

Normalize.css kullanırsanız, bu stil sayfası benzer bir şey yapar input[type="search"] { -webkit-appearance: textfield; }.

Bu, tek bir sınıf seçicisinden daha yüksek bir özgüllüğe sahiptir .foo, bu yüzden sadece yapamayacağınızı unutmayın .my-field { -webkit-appearance: none; }. Doğru özgüllüğü elde etmenin daha iyi bir yolu yoksa, bu yardımcı olacaktır:

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

— Henrik N
kaynak

4

Lütfen bunu deneyin:

Aşağıdaki inputgibi Css eklemeyi deneyin :

 -webkit-appearance: none;
       border-radius: 0;

— Ivin Raj
kaynak

3

Basit bir sınır yarıçapı kullandım: 0; metin giriş türleri için yuvarlatılmış köşeleri çıkarmak için.

— Jesse
kaynak

0

Düğmeleri Safari'de ve diğer tarayıcılarda düzgün bir şekilde oluşturmak için, webkit görünümünü hiçbirine ayarlamaya ek olarak düğmeler için belirli bir stil vermeniz gerekir;

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

— CpnCrunch
kaynak