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

— 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