web-dev-qa-db-fra.com

iOS force les angles arrondis et l'éblouissement sur les entrées

les appareils iOS ajoutent beaucoup de styles gênants sur les entrées de formulaire, en particulier sur les entrées [type = submit]. Vous trouverez ci-dessous le même formulaire de recherche simple sur un navigateur de bureau et sur un iPad.

Bureau:

Desktop

iPad:

iPad

L'entrée [type = text] utilise un encadré d'ombre de la boîte CSS et j'ai même spécifié -webkit-border-radius: none; qui est apparemment annulé. La couleur et la forme de mon bouton d'entrée [type = submit] sont complètement bâties sur l'iPad. Est-ce que quelqu'un sait ce que je peux faire pour résoudre ce problème? Merci d'avance.

cssiosforms
90
inorganik

La version que j'ai eue est la suivante:

input {
    -webkit-appearance: none;
}

Dans certaines versions de navigateur Webkit, vous pouvez également être confronté au border-radius Toujours en place. Réinitialiser avec les éléments suivants:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Cela peut être étendu pour s’appliquer à tous les composants webkit de style form tels que input, select, button ou textarea.

En référence à la question initiale, vous n'utiliseriez pas la valeur 'none' pour effacer un élément css basé sur l'unité. Sachez également que cela masque les cases à cocher dans Chrome. Vous pouvez donc utiliser quelque chose comme input[type=text] Ou input:not([type=checkbox]), input:not([type=radio]) à la place.

177
marksyzm

Vous pouvez vous débarrasser de certains formulaires Webkits, entrées, etc. avec ceci:

input, textarea, select {
   -webkit-appearance: none;
}
17
nick

Pour le bouton d'envoi, n'utilisez pas:

<input type="submit" class="yourstylehere" value="submit" />

Utilisez plutôt la balise button:

<button type="submit" class="yourstylehere">Submit</button>

Cela a fonctionné pour moi.

3
Digital Robot Gorilla

regardez normalize.css

Il existe une démo où vous pouvez tester les éléments de formulaire et voir à quoi ils ressemblent dans iOS. Il existe plusieurs propriétés orientées webkit.

1
Rdpi

C'est ce que j'utilise dans mes projets

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}
1
Waqar Alamgir

Vous rencontrez également ce problème dans certains navigateurs si vous disposez des éléments suivants:

<a class="btn btn-primary" href="#" type="button">Link</a>

au lieu de:

<a class="btn btn-primary" href="#" role="button">Link</a>

Cela peut arriver si vous modifiez votre élément d'entrée pour un élément anker et oubliez de changer type en role.

J'ai eu ce problème sur les deux Chrome et Safari sur mon iPad.

0
Dirk