iPhone iOS nicht box-shadow richtig

Question

The Design

Das Kontaktformular auf einem ansprechenden Design hat Eingabefelder sowohl mit eingelassenem Schatten und regelmäßig außerhalb Schatten anzuzeigen. Siehe Bild unten.

---

Der Kodex

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); 
} 

---

Die Ausgabe

iOS v4 + nicht die box-shadow richtig anzeigt. Siehe Bild unten.

---

Getestet

I -webkit-box-shadow mit versucht haben.

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

Ich habe display:block; auf das Eingabeelement angewendet.

---

Aktuelle Abhilfe

würde ich es vorziehen, dies nicht zu tun haben, aber das ist die einzige Art, wie ich meine gewünschte Wirkung bekommen.

HTML

<p><input /></p> 

CSS

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); 
    } 

Auch mit diesem Problem zu umgehen, ist der Einsatz Schatten auf iOS nicht richtig wiedergegeben; aber es ist nah genug.

---

Meine Frage

Ist es möglich, mehrere Instanzen von box-shadow auf einem einzigen Element zu haben, machen richtig auf iOS-Geräten? Wenn nicht, was ist mit dem Schatten? Oder verwende ich diese Eigenschaft und ihre Werte falsch?

Vielen Dank im Voraus!

Answer 1

Versuchen Sie -webkit-appearance: none; hinzufügen iOS neigt dazu, Formulare zu versauen.