Deaktivieren Sie die Rundung der iPhone / Safari-Eingabeelemente

374

Meine Website wird im iPhone / Safari-Browser gut wiedergegeben, mit einer Ausnahme: Meine Texteingabefelder haben einen seltsam abgerundeten Stil, der mit dem Rest meiner Website überhaupt nicht gut aussieht.

Gibt es eine Möglichkeit, Safari (über CSS oder Metadaten) anzuweisen, die Eingabefelder nicht zu runden und sie wie beabsichtigt rechteckig zu machen?

html css iphone mobile-safari css-reset Alex
quelle
1
Ich frage mich, warum KEIN CSS-Reset diese supereinfache CSS-Regel zu enthalten scheint. Es ist geisteskrank.
Toskan
1
Ich habe tatsächlich einen CSS-Reset erstellt, der auf dem CSS-Reset 2 von Eric Meyer basiert, mit dem zusätzlichen erforderlichen CSS, das Sie in der Antwort hier finden. Es ist verfügbar auf github: github.com/Jossnaz/JossiCssReset
Toskan
1
Seien Sie vorsichtig mit -webkit-appearance: none;, ich denke besser, um diese Bedingung auf den Umfang eines bestimmten Eingabeelements zu beschränken. Andernfalls können Funkeingangselemente ausgeblendet werden, wenn Sie sie auf der Seite haben.
Quas

Antworten:

659

Unter iOS 5 und höher border-radiusmacht der gute alte den Trick:

input {
    border-radius: 0;
}

Wenn Sie unter iOS nur die abgerundeten Ecken entfernen müssen oder aus irgendeinem Grund die abgerundeten Ecken plattformübergreifend nicht normalisieren können, verwenden Sie -webkit-border-radiusstattdessen die Eigenschaft " Präfix" , die weiterhin unterstützt wird. Beachten Sie natürlich, dass Apple die Unterstützung für die vorangestellte Eigenschaft jederzeit einstellen kann, aber angesichts der anderen plattformspezifischen CSS-Funktionen besteht die Möglichkeit, dass sie diese beibehalten.

Bei älteren Versionen mussten Sie -webkit-appearance: nonestattdessen Folgendes festlegen :

input {
    -webkit-appearance: none;
}
BoltClock
quelle
1
Ab iOS 5 wird nur der innere Schatten entfernt. Überprüfen Sie Piyushs Antwort, um auch die abgerundeten Ecken zu entfernen.
Jonathan Freeland
6
-webkit-appearancehat eigentlich nichts mit innerem Schatten und abgerundeten Ecken zu tun. Verwenden Sie es nicht nur dafür. css-infos.net/property/-webkit-appearance
Rudie
14
"Wenn IOS abgerundete Ecken und Schatten haben möchte, lassen Sie IOS-Benutzer sie haben": Das ist in meiner Situation und wahrscheinlich auch in den meisten anderen völlig inakzeptabel.
Coredumperror
2
!! Sie sollten diese Methode nicht verwenden. Das Kontrollkästchen scheint nicht verfügbar zu sein. Aus diesem Grund gehen viele Benutzer meiner Website nicht in Zahlungsvereinbarung vor. !!
Synthresin
10
Für <input type="search">iOS 10 brauchte ich noch -webkit-appearance: none;.
Gabriel Smoljár
55

input -webkit-appearance: none; allein funktioniert nicht.

Versuchen Sie es -webkit-border-radius:0px;zusätzlich.

justadev
quelle
1
Ich musste das -webkit-border-radiusAttribut hinzufügen <input type="text">, um die abgerundeten Ecken in iOS 5 zu entfernen.
Jonathan Freeland
Sie müssen px nach dem 0
mintedsky
42

Dies ist der beste Weg, um die gerundeten IOS zu entfernen.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Hinweis: Bitte verwenden Sie diesen Code nicht für die Auswahloption. Es wird ein Problem bei unserer Auswahl geben.

KoemsieLy
quelle
2
Ich habe festgestellt, dass die Verwendung input[type]den Trick für alle Eingaben zu tun scheint.
JacobTheDev
11

Das Optionsfeld "Akzeptierte Antwort" wurde in Chrome ausgeblendet. Das funktioniert:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
François Romain
quelle
7

Hier ist die Komplettlösung für Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
Johansrk
quelle
14
Nur eine Anmerkung, das @include border-radius(0);Mixin ist nur verfügbar, wenn Sie es selbst definiert haben oder das Compass-Framework verwenden, nicht nur Vanilla SASS.
Waffel
Nur eine Anmerkung, wenn Sie SCSS verwenden, sollten Sie wahrscheinlich auch Autoprefixer verwenden.
Christian
6

Für mich unter iOS 5.1.1 auf einem iPhone 3GS musste ich das Styling eines Suchfeldes löschen und es auf den beabsichtigten Stil einstellen

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

-webkit-border-radius: 0;Allein zu tun hat das native Styling nicht geklärt. Dies war auch für eine Webansicht in einer nativen App.

Chris Bernardi
quelle
5

Ich hatte das gleiche Problem, aber nur für die Schaltfläche "Senden". Muss den inneren Schatten und die abgerundeten Ecken entfernen -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
Seanjacob
quelle
4

Wenn Sie normalize.css verwenden, führt dieses Stylesheet so etwas aus input[type="search"] { -webkit-appearance: textfield; }.

Dies hat eine höhere Spezifität als ein einzelner Klassenselektor. Beachten Sie .fooalso, dass Sie dies nicht einfach tun können .my-field { -webkit-appearance: none; }. Wenn Sie keinen besseren Weg haben, um die richtige Spezifität zu erreichen, hilft dies:

.my-field { -webkit-appearance: none !important; }

Henrik N.
quelle
4

Probieren Sie mal das hier an:

Versuchen Sie, inputCSS wie folgt hinzuzufügen:

 -webkit-appearance: none;
       border-radius: 0;
Ivin Raj
quelle
3

Ich habe einen einfachen Randradius verwendet: 0; um die abgerundeten Ecken für die Texteingabetypen zu entfernen.

Jesse
quelle
0

Um die Schaltflächen in Safari und anderen Browsern ordnungsgemäß zu rendern, müssen Sie den Schaltflächen einen bestimmten Stil zuweisen und das Erscheinungsbild des Webkits auf "Keine" setzen, z.

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
CpnCrunch
quelle