İPad ve iPhone için stil giriş düğmeleri

215

Web sitemdeki giriş düğmelerine stil eklemek için CSS kullanıyorum, ancak IOS cihazlarında stil Mac'in varsayılan düğmeleriyle değiştirildi. İOS için düğmelere stil eklemenin bir yolu var mı yoksa bir gönderme düğmesi gibi davranan bir köprü oluşturmanın bir yolu var mı?

— mheavers
kaynak

524

Arıyor olabilirsiniz

-webkit-appearance: none;

Safari CSS notları -webkit-appearance
Mozilla Geliştirici Ağı -moz-appearance

— Jonas G. Drange
kaynak

Düğmeye basma /: aktif şekillendirme konusunda hala bir fark var, değil mi? Stillerinizi görmezden gelir ve yarı saydam bir gri kaplama uygular mı?

— Alan H.

6

@include experimental(appearance, none);

— SCSS

1

Yukarıdaki bağlantı maalesef öldü ( thinkvitamin.com/design/… ).

— Quest Quest Aronsson

Bununla ilgili bir sorun, <select>kutular için bir Masaüstü tarayıcısında oku göstermemesidir. Yani bu en iyi bence bir medya sorgusu ile eşleştirilmiş.

— 19:13, andrewtweber

Ne ... Gerçekten bu kadar basit miydi? CSSStil vermek için çok fazla çizgi kullandım ve bu çizgi hile yapmak için yeterli miydi ?!

19

Lütfen bu css kodunu ekleyin

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

— subindas pm
kaynak

9

Geçenlerde bu problemle kendim karşılaştım.

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

Umarım yardımcı olur.

— Dijital Robot Goril
kaynak

3

Bu hala bir düğmenin yüksekliğini değiştirmeme izin vermiyor. Komik bir şey olsa da, düğmeye özel bir genişlik verir vermez, özel yükseklik de dikkate alınır.

— grip

Bu, UIkit v3 için düzeltmeydi.

— Kalob Taulien

4

Aşağıdaki css'yi kullanın

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}

<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />

Snippet'i genişlet

— vinod
kaynak

0

-webkit-görünüm: yok;

Not: bir düğmeyi şekillendirmek için bootstrap kullanın.

— Karthiha Karthi
kaynak

0

Bugün aynı sorunu primefaces (primeng) ve açısal 7 kullanarak yaşadım. Style.css dosyasına aşağıdakileri ekleyin

p-button {
   -webkit-appearance: none !important;
}

ben de onu geçersiz kılan bir reboot.css olan bootstrap biraz kullanıyorum (bu yüzden eklemek zorunda kaldım! önemli)

button {
  -webkit-appearance: button;

}

— djnose
kaynak