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

Hier ist die vollständige Lösung für Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

Answer 2

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

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

Answer 3

Wenn Sie normalize.css verwenden, wird dieses Stylesheet etwa so funktionieren input[type="search"] { -webkit-appearance: textfield; } .

Dies hat eine höhere Spezifität als ein einzelner Klassenselektor wie .foo Sie sollten sich also bewusst sein, dass Sie dann nicht einfach .my-field { -webkit-appearance: none; } . Wenn Sie keine bessere Möglichkeit haben, die richtige Spezifität zu erreichen, wird dies helfen:

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

Answer 4

Ich habe ein einfaches border-radius: 0; verwendet, um die abgerundeten Ecken für die Texteingabetypen zu entfernen.

Answer 5

Bitte versuchen Sie dies:

Versuchen Sie hinzuzufügen input Css wie diese:

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