L'iPhone iOS n'affiche pas correctement l'ombre de la boîte

Question

La conception

Le formulaire de contact d'un site responsive design comporte des champs de saisie avec une ombre incrustée et une ombre extérieure normale. Voir l'image ci-dessous.

---

Le code

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

---

La question

iOS v4+ n'affiche pas correctement l'ombre de la boîte. Voir l'image ci-dessous.

---

Testé

J'ai essayé d'utiliser -webkit-box-shadow.

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

J'ai posé ma candidature display:block; à l'élément d'entrée.

---

Solution actuelle

Je préférerais ne pas avoir à le faire, mais c'est la seule façon d'obtenir l'effet désiré.

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

Même avec cette solution de contournement, l'ombre insérée sur iOS n'est pas rendue correctement, mais elle est assez proche.

---

Ma question

Est-il possible d'avoir plusieurs instances de box-shadow sur un seul élément avec un rendu correct sur les appareils iOS ? Si ce n'est pas le cas, qu'en est-il de l'ombre insérée ? Ou est-ce que j'utilise cette propriété et ses valeurs de manière incorrecte ?

Merci d'avance !

Answer 1

Essayez d'ajouter -webkit-appearance: none; iOS a tendance à gâcher les formulaires.

Answer 2

J'ai eu un problème en essayant d'ajouter une ombre autour des entrées non valides (avant que l'on ne clique sur "submit").

Utilisation -webkit-appearance: none; a bien fonctionné pendant un certain temps, mais j'ai remarqué que sur chrome les cases à cocher ont disparu.

Voici mon hack qui fonctionne plus ou moins avec tous les navigateurs. On dirait que safari est le nouveau "internet explorer" :-/

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 */
}