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
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

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
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
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
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
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
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
source