ios - iPhoneiOSはボックスシャドウを正しく表示しません

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

---

問題

iOSv4+はボックスシャドウを正しく表示しません。下の画像を参照してください。

---

テスト済み

-webkit-box-shadowを使用してみました。

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

display:block;input要素に適用しました。

---

現在の回避策

私はこれをする必要がないことを望みます、しかしこれは私が私の望ましい効果を得ることができる唯一の方法です。

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のはめ込みシャドウは適切にレンダリングされません。しかし、それは十分に近いです。

---

私の質問

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

前もって感謝します！

Answer 1

iOSを追加してみると、-webkit-appearance: none;フォームが台無しになりがちです。

Answer 2

無効な入力の周りにボックス シャドウを追加しようとして問題が発生しました (送信がクリックされる前)。

しばらくの間は問題なく使用-webkit-appearance: none;できましたが、クロムのチェックボックスがなくなっていることに気付きました。

これは、多かれ少なかれクロスブラウザーで機能する私のハックです。サファリは新しい「インターネット エクスプローラー」のようです :-/

input:invalid, select:invalid, textarea:invalid, .invalid {
    background-clip: padding-box; /* Safari fix */
    box-shadow: 0 0 5pt 2pt rgba(255,0,0,.75) !important;
}

select:invalid {
    border: 1px solid red; /* Safari fix */
}

input[type="checkbox"]:invalid{
    background: red; /* Safari fix */
}

input[type="radio"]:invalid{
    background: red; /* Safari fix */
}