iPhone iOS, gölgeli görüntüyü göstermeyecek

Question

Tasarım

Duyarlı bir tasarıma sahip iletişim formu, hem yerleşik gölgeli hem de normal dış gölgeli giriş alanlarına sahiptir. Aşağıdaki resme bakın.

---

Kod

input { 
    background:#fff; 
    height:auto; 
    padding:8px 8px 7px; 
    width:100%; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    border:#fff solid 3px; 
    border-radius:4px; 
    box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); 
} 

---

Sayı

iOS v4 + düzgün kutu-gölge göstermez. Aşağıdaki resme bakın.

---

Ben -webkit-box-gölge kullanılarak çalıştılar

test edilmiştir.

-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), 
        inset 2px 2px 3px rgba(0, 0, 0, .2); 

Giriş öğesine display:block; uyguladık.

---

Güncel Çözüm

Bunu yapmak zorunda tercih ediyorum, ama bu benim istenen etkiyi elde edebilirsiniz tek yoludur.

HTML

<p><input /></p> 

CSS Hatta bu geçici çözüm

p { 
    width:50%; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-shadow:0px 0px 5px rgba(0, 0, 0, .35); 
    border-radius:4px; 
} 

    input { 
     background:#fff; 
     height:auto; 
     padding:8px 8px 7px; 
     width:100%; 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     border:#fff solid 3px; 
     border-radius:4px; 
     box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2); 
    } 

, iOS'da gömme gölge düzgün hale değildir; ama yeterince yakın.

---

My Soru

iOS cihazlarda düzgün oluşturulması tek bir unsur üzerinde box-shadow birden çok örneği olabilir mi? Değilse, içerideki gölge ne olacak? Yoksa bu özelliği ve değerlerini yanlış mı kullanıyorum?

Şimdiden teşekkürler!

Answer 1

-webkit-appearance: none; iOS'u eklemeye çalışın iOS formları dağıtma eğilimindedir.