Safari Mobile'ın giriş düğmelerine yuvarlatılmış köşeler vermesini durdurun

82

Sanırım konu her şeyi söylüyor. Bir Iphone, Ipod veya Ipad'de görüntülendiğinde bir web uygulamam var, giriş gönderme düğmelerinin köşeleri yuvarlatılmış. Bunu durdurmanın bir yolu var mı?

ios mobile-safari

— Acemi Fletcher
kaynak

185

Eğer eklerseniz ...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

Ardından düğmeleriniz, diğer tarayıcılar için uyguladığınız tüm CSS stillerini devralır.

— metodofaksiyon
kaynak

1

Bu iPad2, iOS 5.1.1'de çalışmaz. Bununla birlikte, test edecek herhangi bir cihazım olmadığı için diğer iOAS cihazlarında çalışmayacağından emin olamıyorum. Ancak, Roel en -webkit-border-radius:0pxçözümü yapar çalışmalarını.

— coredumperror

-Webkit-görünümünü uygulamazsanız: hiçbiri, Safari üzerine uygulanabilecek özellikler konusunda seçici olmaz (yani font-sizeve color. En iyi çözüm her ikisini de uygulamaktır.

— methodofaction

Bu çözümün iPad, iOS 5.1.1 için çalıştığını onaylamak için bildirimde bulunma.

— Dominor Novus

6

2 yaşındaki bir yoruma yanıt verirken .... oh iyi. -webkit-görünüm: yok; onay kutularının Chrome'da görünmemesine neden olur. Muhtemelen diğer öğeleri ve tarayıcıları da etkiler.

— matthew_360

VAY!!! Bunu bir cordova uygulamasında düzeltmek için saatler arıyorduk ve çözüm buydu! Buna yeterince olumlu oy veremiyorum !!!

— Jay Dinse

18

Benim için işe yaramadı, -webkit-görünümü: yok.

Bu yapar:

input[type=submit] {
    -webkit-border-radius:0px;
}

Sadece iPhone'da arka plan görüntüsü olan bir düğmedeki yuvarlak köşelerle aynı sorunu yaşadım.

— Roel
kaynak

1

Onaylama: Buradaki en yüksek oyu alan yanıt (Duopixel tarafından) işe yaramıyor, ancak Roel'in yanıtı çalışıyor. Bunun nedeni muhtemelen aradan geçen aylarda Apple'ın mobil webkit uygulamasında yapılan bir değişikliktir.

— coredumperror

@CoreDumpError - Bunun sizin için çalışmadığını söylüyorsunuz . Çözüm benim için çalıştı - onu yeni uyguladım. Neden farklı sonuçlar yaşadığımızdan emin değilim. Sonra tekrar, gönderiniz yarım yıldan uzun bir süre önce yapıldı, bu yüzden hala aynı sorunu yaşayıp yaşamadığınızı anlayamıyorum.

— Dominor Novus

@Roel, basitçe öncelik sorunlarınız olabilir ...?

— Frank Nocke

13

Aşağıdaki CSS'yi kullanmayı deneyebilirsiniz:

-webkit-appearance:none;

Daha fazla bilgi: http://trentwalton.com/2010/07/14/css-webkit-appearance/

— Dthukka
kaynak

6

İPad 2'de aşağıdakileri kullanmanız gerektiğini buldum:

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

düğme sınıfınızda.

— Daniele F.
kaynak

3

Girdi gönderme türü = "resim" olan bir sitem vardı. Yukarıdakilerin bu vairation yuvarlak köşeleri sabitledi:

input[type=image] {
    -webkit-border-radius:0px;
}

— RevConcept
kaynak

1

Ayarın background: linear-gradient(color1, color2)Apple cihazlarında aşırı yuvarlatılmış köşelerden kurtulduğunu ve denediğim diğer tüm tarayıcılarda / platformlarda çalıştığını buldum.

— mait
kaynak

Bu benim için sorunu çözdü ve bana, istenmeyen yan etkilere sahip olma olasılığı en düşük seçenek gibi görünüyor.

— Wim Deblauwe

1

Hem "düğme" hem de "gönder" türleri için kod ekleyerek çözdüm:

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

— AGalvis
kaynak