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

94

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

Bureau:

Bureau

iPad:

iPad

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

css ios forms inorganik
la source
4
-apparence du webkit: aucun; Aide à éliminer la plupart des problèmes, mais n'élimine toujours pas l'écart entre les deux éléments ou les coins arrondis. Donc, toute aide à ce sujet serait appréciée. Merci.
inorganik le
2
Vous avez précisé -webkit-border-radius:none;avez-vous précisé border-radius:none;?
Rigel Glen
7
Spécifier -webkit-appearance:noneet -webkit-border-radius:0faire l'affaire sur iOS pour moi!
Primus202

Réponses:

183

La version que j'avais de travail est:

input {
    -webkit-appearance: none;
}

Dans certaines versions de navigateur Webkit, vous pouvez également être confronté à ce border-radiusqui est toujours en place. Réinitialisez avec ce qui suit:

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

Cela peut être étendu à appliquer à tous les style WebKit formcomposants tels que input, select, buttonou textarea.

En référence à la question d'origine, vous n'utiliserez pas la valeur «aucun» lors de la suppression d'un élément css basé sur une unité. Sachez également que cela masque les cases à cocher dans Chrome, alors utilisez peut-être quelque chose comme input[type=text]ou input[type=submit], input[type=text](notez que input:not([type=checkbox]), input:not([type=radio])cela s'appliquera à tous les types d'entrée, car chaque entrée satisfait l'une de ces deux conditions).

marksyzm
la source
5
-apparence du webkit: aucun; Cache les cases à cocher dans Chrome - pas une solution valide!
Nico Westerdale
2
-apparence du webkit: aucun; fait l'affaire! (-webkit-border-radius pas nécessaire)
OZZIE
Bon point - cela dépend de la version du navigateur, j'ai trouvé, donc c'est juste là pour une sécurité intégrée. Je vais modifier le message pour sa pertinence.
marksyzm
3
input: not ([type = "checkbox"]) serait un meilleur moyen d'éviter le problème dans Chrome? Bien que cela ne fonctionne pas dans IE <= 8, mais là encore, ce n'est pas ce que vous essayez de corriger.
Robin French
L'utilisation input:not([type=checkbox]), input:not([type=radio])signifie que le style s'applique à tous les boutons de Safari, car chaque bouton remplit l'une de ces deux conditions. Au lieu de cela, j'ai utilisé input[type=submit], input[type=text].
miguelmorin il y a
17

Vous pouvez vous débarrasser de certains styles de formulaire, d'entrée, etc. de kits Web supplémentaires avec ceci:

input, textarea, select {
   -webkit-appearance: none;
}
pseudo
la source
Il faudrait encore une border-radius: 0;réinitialisation complète et ne veut pas d'un rayon de bordure. Sinon, réglez simplement le fichier border-radius.
Refilon le
3

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.

Robot numérique Gorilla
la source
1
FWIW, vient d'avoir ce problème sur un projet, et l'iPad 1 sur lequel je testais a également ajouté des styles aux <button>balises. Je pense donc que vous feriez mieux de résoudre ce problème directement avec CSS.
neemzy
1

jetez un œil à normalize.css

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

Rdpi
la source
1

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; 
}
Waqar Alamgir
la source
0

Vous rencontrez également ce problème dans certains navigateurs si vous avez les é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 passer typeà role.

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

Poignard
la source