Verhindern Sie, dass Safari Mobile den Eingabetasten abgerundete Ecken gibt

81

Ich denke, das Thema sagt alles. Ich habe eine Webanwendung, wenn sie auf einem iPhone, Ipod oder Ipad angezeigt wird. Eingabeschaltflächen haben abgerundete Ecken. Gibt es eine Möglichkeit, dies zu stoppen?

ios mobile-safari Neuling Fletcher
quelle

Antworten:

185

Wenn Sie hinzufügen ...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

Dann erben Ihre Schaltflächen alle CSS-Stile, die Sie für andere Browser angewendet haben.

Methode der Aktion
quelle
1
Dies funktioniert nicht auf iPad2, iOS 5.1.1. Ich kann jedoch nicht sicher sein, dass es auf anderen iOAS-Geräten nicht funktioniert, da ich keine zum Testen habe. Allerdings Roel Die -webkit-border-radius:0pxLösung macht Arbeit.
Coredumperror
Wenn Sie -wekkit-Erscheinungsbild nicht anwenden: keine, dann wird Safari wählerisch in Bezug auf die Eigenschaften, die darauf angewendet werden können (nämlich font-sizeund color. Die beste Lösung wäre, beide anzuwenden.
Methodofaction
Melden Sie sich an, um zu bestätigen, dass diese Lösung für iPad, iOS 5.1.1 funktioniert.
Dominor Novus
5
Antwort auf einen 2 Jahre alten Kommentar .... na ja. -webkit-Aussehen: keine; bewirkt, dass Kontrollkästchen in Chrome nicht sichtbar sind. Betrifft wahrscheinlich auch andere Elemente und Browser.
Matthew_360
BEEINDRUCKEND!!! Wir haben stundenlang gesucht, um dies in einer Cordova-App zu beheben, und dies war die Lösung! Ich kann das nicht genug bewerten !!!
Jay Dinse
18

Hat bei mir nicht funktioniert, das -webkit-Aussehen: keine.

Das macht:

input[type=submit] {
    -webkit-border-radius:0px;
}

Ich hatte das gleiche Problem mit abgerundeten Ecken auf einer Schaltfläche mit Hintergrundbild, nur auf dem iPhone.

Roel
quelle
1
Bestätigung: Die Antwort mit der höchsten Stimme hier (von Duopixel) funktioniert nicht, Roels Antwort jedoch. Dies ist wahrscheinlich auf eine Änderung der Implementierung des mobilen Webkits von Apple in den vergangenen Monaten zurückzuführen.
Coredumperror
@CoreDumpError - Du meinst, es funktioniert nicht für dich . Die Lösung hat bei mir funktioniert - ich habe sie gerade implementiert. Ich bin mir nicht sicher, warum wir unterschiedliche Ergebnisse erzielen. Andererseits wurde Ihr Beitrag vor über einem halben Jahr erstellt, sodass ich nicht sagen kann, ob Sie immer noch das gleiche Problem haben.
Dominor Novus
@Roel, Sie haben möglicherweise einfach Vorrangprobleme ...?
Frank Nocke
6

Ich habe festgestellt, dass Sie auf dem iPad 2 Folgendes verwenden müssen:

-webkit-appearance:none;
border-radius: 0;

in Ihrer Button-Klasse.

Daniele F.
quelle
3

Ich hatte eine Site mit einer Eingabe submit type = "image". Diese Abweichung von oben fixierte die abgerundeten Ecken:

input[type=image] {
    -webkit-border-radius:0px;
}
RevConcept
quelle
1

Ich habe festgestellt, dass die Einstellung background: linear-gradient(color1, color2)die übermäßig abgerundeten Ecken auf Apple-Geräten beseitigt und auf allen anderen Browsern / Plattformen funktioniert, die ich ausprobiert habe.

Mait
quelle
Dies hat es für mich behoben und es scheint mir die am wenigsten wahrscheinliche Option zu sein, unbeabsichtigte Nebenwirkungen zu haben.
Wim Deblauwe
0

Ich habe das Problem gelöst, indem ich Code für die Typen "button" und "submit" hinzugefügt habe:

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }
AGalvis
quelle