Entfernen Sie den inneren Schatten des Textbereichs auf Mobile Safari (iPhone).

152

Standardmäßig fügt Mobile Safari allen Eingabefeldern, einschließlich des Textbereichs, den oberen inneren Schatten hinzu. Gibt es eine Möglichkeit, es zu entfernen?

Es ist besonders hässlich, wenn Sie einen weißen Hintergrund haben.

iphone mobile mobile-safari Lyon
quelle

Antworten:

340

Durch Hinzufügen dieses CSS-Stils:

-webkit-appearance: none;
Lyon
quelle
26
Seien Sie vorsichtig, wenn Sie diese Eigenschaft zu den Kontrollkästchen für Eingabetypen und Optionsfeldern hinzufügen, da dadurch die Kontrollkästchen und Optionsfelder ausgeblendet werden;)
Zain Shaikh
14
Danke für die Antwort Lyon. Übrigens ist der beste Weg, es zu verwenden, es nur auf anzuwenden textarea, input[type="text"], input[type="submit"].
jgthms
8
Vergiss auch nicht input[type="password"].
Nick Pyett
7
Vergiss auch nicht [type="email"]!
Willster
35
Je nachdem, welche Eingabetypen Sie verwenden, ist es möglicherweise einfacher, den Operator not zu verwenden:input:not([type=checkbox]):not([type=radio])
Justin Fisher,
30

Beim Hinzufügen des CSS-Stils

-webkit-appearance: none;

wird funktionieren, es wird alles los. Vielleicht möchten Sie dies stattdessen versuchen:

box-shadow: none !important;

Auf diese Weise behalten Sie den Abwärtspfeil.

Justin Tolchin
quelle
6
Das Hinzufügen einer Box-Shadow-Eigenschaft funktioniert nicht. Der innere Schatten wird in Safari unter iOS weiterhin angezeigt.
Silentmouth
22

Hier ist die einfache Lösung

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
IqbalBary
quelle
9

Manchmal kann es sein, dass ein Stylesheet dort kaputt ist. appearance: none;Eine Möglichkeit, dies zu beheben, besteht darin, es zu verwenden caret. Der beste Weg ist, Ihren Code neu zu schreiben und herauszufinden, wofür ein Teil Ihres Codes den Stil durcheinander bringtnone

Bevor caretSie es verwenden, müssen Sie wissen, dass es zu Problemen mit anderen Stilen kommen kann

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

HINWEIS: Verwenden Sie none, caretist nicht optimal.

TheCrazyProfessor
quelle
-31

Das Festlegen der Eigenschaften " entweder" backgroundund " borderCSS" des inputTags scheint ebenfalls zu funktionieren.

Versuche dies:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>
MTS
quelle
9
Falsch und irreführend. Bitte prüfen Sie den Code auf dem richtigen Gerät vor der Veröffentlichung ...
Ariel
Wirklich falsche Antwort, nichts darüber ist, worüber OP fragt
Jacta