iOS girdilerde yuvarlatılmış köşeleri ve parlamayı zorlar

94

iOS cihazlar, özellikle [type = submit] girişinde form girişlerine çok sayıda can sıkıcı stil ekler. Aşağıda, bir masaüstü tarayıcıda ve bir iPad'de gösterilen aynı basit arama formu gösterilmektedir.

Masaüstü:

Masaüstü Bilgisayar

iPad:

iPad

[Type = text] girdisi bir CSS kutusu gölge eki kullanıyor ve hatta -webkit-border-radius: yok; ki görünüşe göre geçersiz kılınır. Girdiğim [tür = gönder] düğmesinin rengi ve şekli iPad'de tamamen alçaltılıyor. Bunu düzeltmek için ne yapabileceğimi bilen var mı? Şimdiden teşekkürler.

css ios forms

— inorganik
kaynak

4

-webkit-görünüm: yok; Çoğu sorunu gidermeye yardımcı olur, ancak yine de iki öğe veya yuvarlatılmış köşeler arasındaki boşluğu ortadan kaldırmaz. Bu yüzden bununla ilgili herhangi bir yardım takdir edilecektir. Teşekkürler.

— inorganik

2

Belirtilen -webkit-border-radius:none;belirttiğiniz mi border-radius:none;?

— Rigel Glen

7

Belirtilmesi -webkit-appearance:noneve -webkit-border-radius:0benim için iOS'ta hile yaptı!

— Primus202

184

Çalıştığım sürüm:

input {
    -webkit-appearance: none;
}

Bazı webkit tarayıcı sürümlerinde, border-radiushala yerinde olma durumuyla da karşılaşabilirsiniz . Aşağıdakilerle sıfırlayın:

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

Bu, tüm webkit tarz uygulanacak uzatılabilir formgibi bileşenler input, select, buttonveya textarea.

Orijinal soruya referans olarak, herhangi bir birim tabanlı css öğesini temizlerken 'yok' değerini kullanmazsınız. Ayrıca Chrome'da bu gizler onay kutuları, bu yüzden belki gibi bir şey kullanmak farkında input[type=text]ya input[type=submit], input[type=text]veya onun yerine örneğin yuvarlak köşe ayarları kullanmak olmayanları filtrelemek input:not([type=checkbox]), input:not([type=radio]).

— Marksyzm
kaynak

5

-webkit-görünümü: yok; Chrome'da onay kutularını gizler - geçerli bir çözüm değil!

— Nico Westerdale

2

-webkit-görünümü: yok; hile yapar! (-webkit-border-radius gerekli değildir)

— OZZIE

İyi bir nokta - bulduğum tarayıcı sürümüne bağlı, bu yüzden güvenli bir yer var. Gönderiyi alaka düzeyi için düzenleyeceğim.

— marksyzm

3

input: not ([type = "checkbox"]) Chrome'da bu sorunu önlemenin daha iyi bir yolu olur mu? IE <= 8'de çalışmasa da, yine de düzeltmeye çalıştığınız şey bu değil.

— Robin French

Kullanımı input:not([type=checkbox]), input:not([type=radio]), stilin Safari'deki tüm düğmeler için geçerli olduğu anlamına gelir, çünkü her düğme bu iki koşuldan birini karşılar. Bunun yerine kullandım input[type=submit], input[type=text].

— miguelmorin

17

Bununla daha fazla webkit formundan, girdisinden vb. Stillerden kurtulabilirsiniz:

input, textarea, select {
   -webkit-appearance: none;
}

— Nick
kaynak

Yine de border-radius: 0;tamamen sıfırlanması gerekir ve bir sınır yarıçapı istemez. Aksi takdirde sadece border-radius.

— Refilon

3

Gönder düğmesi için şunları kullanmayın:

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

Bunun yerine düğme etiketini kullanın:

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

Bu benim için çalıştı.

— Dijital Robot Goril
kaynak

1

FWIW, bir projede bu sorunu yaşadı ve üzerinde test ettiğim iPad 1 de <button>etiketlere stiller ekledi . Bu yüzden bunu doğrudan CSS ile çözmenin daha iyi olacağını düşünüyorum.

— neemzy

1

normalize.css'ye bir göz atın

Form öğelerini test edebileceğiniz ve ios'ta nasıl göründüklerini görebileceğiniz bir demo var. Birden çok webkit odaklı özellik vardır.

— Rdpi
kaynak

1

Projelerimde kullandığım şey bu

* { 
    -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
kaynak

0

Aşağıdakilere sahipseniz bazı tarayıcılarda da bu sorunu yaşarsınız:

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

onun yerine:

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

Anker öğesi için giriş öğenizi değiştirirseniz ve değiştirmeyi unutursanız bu typeolabilir role.

IPad'imde hem Chrome hem de Safari'de bu sorunu yaşadım.

— Dirk
kaynak