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?

— mheavers
source

526

Vous cherchez peut-être

-webkit-appearance: none;

Safari CSS notes sur -webkit-appearance
Réseau de développeurs Mozilla -moz-appearance

— Jonas G. Drange
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
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
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
source

0

-apparence web: aucun;

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

— Karthiha Karthi
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
source