CSS Submit Button seltsames Rendering auf iPad / iPhone

222

Mir ist aufgefallen, dass meine Schaltflächen, wenn ich sie mit CSS unter Verwendung von Radius, Farben und Rahmen gestalte, gut aussehen, aber auf dem iPhone / iPad / iPod schrecklich aussehen ... sollte nicht das gleiche Rendering wie auf Safari Desktop sein?

Geben Sie hier die Bildbeschreibung ein

iphone css ipad mobile-safari mobile-webkit Francesco
quelle

Mögliches Duplikat des CSS-Stils für Eingabetasten auf dem iPad / iPhone

Skolima

Antworten:

452

Hoppla! Ich habe mich gerade gefunden: Fügen Sie diese Zeile einfach zu jedem Element hinzu, das Sie benötigen

   -webkit-appearance: none;

Francesco
quelle

Ich liebe dich, Stackoverflow und @Francesco

Jahrichie

Genial, und hier ist ein großartiger Artikel über CSS-Tricks. Es listet alle anderen Elemente auf, die von WebKit und Mozilla geändert wurden.

Patrick

Compass hat auch dafür ein Mixin kompass-style.org/reference/compass/css3/appearance

Patrick Beeson

Ich wünschte, ich hätte diese Google-Suche vor 12 Stunden durchgeführt ... DANKE.

Elly Post

Echt super! Ich habe nicht gedacht, dass diese Art von Problem auch bei iOS aufgetreten ist! Nochmals vielen Dank dafür!

Saurabh Prajapati

Fügen Sie diesen Code in die CSS-Datei ein:

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Das wird helfen.

subindas pm
quelle

Toll! Formular

Senden

@peterkodermac Bitte vergessen Sie nicht, die übergeordnete CSS-Klasse hinzuzufügen. Andernfalls kann dies jedes Eingabefeld betreffen.

Subindas pm

Die obige Antwort für das Erscheinungsbild des Webkits hat die Magie ausgelöst, aber die Schaltfläche sah im Vergleich zum Browser auf anderen Geräten / Desktops immer noch etwas blass / langweilig aus. Ich musste auch die Deckkraft auf voll einstellen (Bereiche von 0 bis 1)

-webkit-appearance:none;
opactiy: 1

Nach dem Einstellen der Deckkraft sah die Schaltfläche auf allen verschiedenen Geräten / Emulatoren / Desktops gleich aus.

Priyank Thakkar
quelle