Abrunden von iPhone/Safari-Eingabeelementen ausschalten

Question

Meine Website wird auf dem iPhone/Safari-Browser gut dargestellt, mit einer Ausnahme: Meine Texteingabefelder haben einen seltsamen abgerundeten Stil, der überhaupt nicht zum Rest meiner Website passt.

Gibt es eine Möglichkeit, Safari (über CSS oder Metadaten) anzuweisen, die Eingabefelder nicht abzurunden und sie wie vorgesehen rechteckig darzustellen?

Answer 1

Unter iOS 5 und höher:

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

Wenn Sie die abgerundeten Ecken nur auf iOS entfernen müssen oder aus irgendeinem Grund die abgerundeten Ecken nicht plattformübergreifend normalisieren können, verwenden Sie input { -webkit-border-radius: 0; } Eigenschaft, die weiterhin unterstützt wird. Natürlich ist zu beachten, dass Apple die Unterstützung für die vorangestellte Eigenschaft jederzeit einstellen kann, aber in Anbetracht ihrer anderen plattformspezifischen CSS-Funktionen ist es wahrscheinlich, dass sie sie beibehalten werden.

Bei älteren Versionen mussten Sie die -webkit-appearance: none stattdessen:

input {
    -webkit-appearance: none;
}

Answer 2

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

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

Answer 3

Es ist der beste Weg, um die abgerundete in IOS zu entfernen.

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

Nota: Bitte verwenden Sie diesen Code nicht für die Select Option. Es wird Probleme mit unserer Auswahl haben.

Answer 4

Die akzeptierte Antwort ließ die Optionsschaltfläche in Chrome verschwinden. Dies funktioniert:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

Answer 5

Bei mir musste ich unter iOS 5.1.1 auf einem iPhone 3GS das Styling eines Suchfeldes löschen und es dann auf den gewünschten Stil einstellen

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

Tun -webkit-border-radius: 0; allein hat die einheimische Formgebung nicht geklärt. Dies galt auch für eine Webansicht in einer nativen App.