Boutons de saisie de style pour iPad et iPhone

215

J'utilise CSS pour styliser les boutons d'entrée sur mon site Web, mais sur les appareils IOS, le style est remplacé par les boutons par défaut de Mac. Existe-t-il un moyen de styliser les boutons pour iOS ou peut-être de créer un lien hypertexte qui se comporte comme un bouton d'envoi?

iphone css ios ipad mheavers
la source

Réponses:

526

Vous cherchez peut-être 

-webkit-appearance: none;
Jonas G. Drange
la source
Il y a toujours une différence dans le bouton enfoncé /: style actif, non? Il ignore vos styles et applique une superposition grise semi-transparente?
Alan H.
6
Si vous utilisez SCSS, utilisez@include experimental(appearance, none);
Sam Soffes
1
Le lien ci-dessus est maintenant mort, malheureusement ( thinkvitamin.com/design/… ).
Per Quested Aronsson
Un problème avec cela est que pour les <select>boîtes, il n'affiche pas la flèche sur un navigateur de bureau. Donc, cela est mieux associé à une requête médiatique, je pense.
andrewtweber
Qu'est-ce que c'était vraiment si simple? J'ai utilisé beaucoup de CSSlignes pour le styliser et cette ligne était suffisante pour faire l'affaire?!
19

Veuillez ajouter ce code CSS

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
subindas pm
la source
9

J'ai récemment rencontré ce problème moi-même.

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

J'espère que cela pourra aider.

Digital Robot Gorilla
la source
3
Cela ne me permet toujours pas de modifier la hauteur d'un bouton. Chose amusante cependant, dès que je donne au bouton une largeur personnalisée, la hauteur personnalisée est également prise en compte.
grippe
C'était le correctif pour UIkit v3.
Kalob Taulien
4

Utilisez le css ci-dessous

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />
Développer l'extrait

vinod
la source
0

-apparence web: aucun;

Remarque: utilisez le bootstrap pour styliser un bouton, c'est courant pour réactif.

Karthiha Karthi
la source
0

J'ai eu le même problème aujourd'hui en utilisant PrimeFaces (Primeng) et angular 7. Ajoutez ce qui suit à votre style.css

p-button {
   -webkit-appearance: none !important;
}

j'utilise également un peu de bootstrap qui a un reboot.css, qui le remplace (c'est pourquoi j'ai dû ajouter! important)

button {
  -webkit-appearance: button;

}

djnose
la source