web-dev-qa-db-fra.com

Boutons de saisie de style pour iPad et iPhone

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

iphonecssiosipad
192
mheavers

Vous cherchez peut-être 

-webkit-appearance: none;
487
Jonas G. Drange

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.

9
Digital Robot Gorilla

S'il vous plaît ajouter ce code CSS

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

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!" />

1
vinod

-webkit-apparence: aucun;

Remarque: utilisez bootstrap pour attribuer un style à un bouton. Son point commun est réactif.

0
Karthiha Karthi

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 aussi un peu de bootstrap qui a un reboot.css, qui le remplace par (c'est pourquoi j'ai dû ajouter! important)

button {
  -webkit-appearance: button;

}

0
djnose