iPhoneのiOSが正しく

Question

デザイン

ボックスシャドウを表示しません応答設計上のお問い合わせフォームははめ込み影と定期的な外部の影の両方に入力フィールドを持っています。下の画像を参照してください。

---

コード

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

---

問題

のiOS V4 +正しくボックスシャドウを表示しません。下の画像を参照してください。私は-webkit-ボックスシャドウを使用しようとしている

をテスト済み

---

。

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

入力要素にdisplay:block;を適用しました。

---

現在の回避策

私はこれを行うには持っていないことを好むだろうが、これは私が私の所望の効果を得ることができる唯一の方法です。

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

でも、この回避策で、iOSのはめ込み影が正しく表示されません。しかしそれは十分に近いです。

---

私の質問

は、それが単一の要素iOSデバイス上で適切にレンダリングのボックスシャドウの複数のインスタンスを持つことは可能ですか？そうでない場合は、影の影はどうですか？または、このプロパティとその値を間違って使用していますか？

ありがとうございます！

Answer 1

-webkit-appearance: none;を追加してみてください.iOSはフォームを台無しにする傾向があります。