Entfernen von Textarea Inner Shadow auf Mobile Safari (iPhone)

Question

Standardmäßig scheint Mobile Safari den oberen inneren Schatten zu allen Eingabefeldern hinzuzufügen, einschließlich Textbereich. Gibt es eine Möglichkeit, es zu entfernen?

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

Answer 1

Durch das Hinzufügen dieses CSS-Stil:

-webkit-appearance: none; 

Answer 2

Einstellung entweder background und border CSS-Eigenschaften des input Tag scheint auch zu funktionieren.

Try this:

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

<form> 
First name: <input type="text"/><br /> 
Last name: <input type="text" /> 
</form> 

Answer 3

Während Hinzufügen der CSS-Stil

-webkit-appearance: none; 

funktioniert, wird es von allem befreien. Sie können dies stattdessen versuchen:

box-shadow: none !important; 

Auf diese Weise behalten Sie den Pfeil nach unten.

Answer 4

Manchmal kann man ein Stylesheet haben dort brach die so eine Möglichkeit, es zu beheben, wenn das passiert, ist caret zu verwenden. Der beste Weg, wird Ihren Code neu zu schreiben und herausfinden, was für none

den Stil vermasseln Teil des Codes gibt es carat Vor der Verwendung Sie müssen wissen, dass es Ihnen einige Probleme mit anderen Stilen bekommen

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

HINWEIS: Verwenden Sie none, caret ist nicht die optimale.

Answer 5

Hier ist die einfache Lösung

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