Styling-Eingabetasten für iPad und iPhone

214

Ich verwende CSS, um die Eingabeschaltflächen auf meiner Website zu formatieren, aber auf IOS-Geräten wird das Styling durch die Standardschaltflächen des Mac ersetzt. Gibt es eine Möglichkeit, Schaltflächen für iOS zu formatieren oder einen Hyperlink zu erstellen, der sich wie eine Senden-Schaltfläche verhält?

iphone css ios ipad mheavers
quelle

Antworten:

524

Sie suchen vielleicht 

-webkit-appearance: none;
Jonas G. Drange
quelle
Es gibt immer noch einen Unterschied beim Drücken der Taste /: aktives Styling, oder? Es ignoriert Ihre Stile und wendet eine halbtransparente graue Überlagerung an?
Alan H.
6
Wenn Sie SCSS verwenden, verwenden Sie@include experimental(appearance, none);
Sam Soffes
1
Der obige Link ist jetzt leider tot ( thinkvitamin.com/design/… ).
Per Quested Aronsson
Ein Problem dabei ist, dass bei <select>Feldern in einem Desktop-Browser der Pfeil nicht angezeigt wird. Dies lässt sich also am besten mit einer Medienabfrage kombinieren, denke ich.
Andrewwweber
Was ... War es wirklich so einfach? Ich habe viele CSSLinien verwendet, um es zu stylen, und diese Linie war genug, um den Trick zu machen?!
19

Bitte fügen Sie diesen CSS-Code hinzu

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

Ich bin kürzlich selbst auf dieses Problem gestoßen.

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

Hoffentlich hilft das.

Digitaler Roboter-Gorilla
quelle
3
Das erlaubt mir immer noch nicht, die Höhe eines Knopfes zu ändern. Lustige Sache, sobald ich dem Button eine benutzerdefinierte Breite gebe, wird auch die benutzerdefinierte Höhe berücksichtigt.
Grippe
Dies war das Update für UIkit v3.
Kalob Taulien
4

Verwenden Sie das folgende CSS

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!" />
Erweitern Sie das Snippet

Vinod
quelle
0

-webkit-Aussehen: keine;

Hinweis: Verwenden Sie Bootstrap, um eine Schaltfläche zu formatieren.

Karthiha Karthi
quelle
0

Ich hatte heute das gleiche Problem mit Primefaces (Primeng) und Angular 7. Fügen Sie Ihrer style.css Folgendes hinzu

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

Ich benutze auch ein bisschen Bootstrap, das eine reboot.css hat, die es überschreibt (deshalb musste ich hinzufügen! wichtig)

button {
  -webkit-appearance: button;

}}

djnose
quelle