Usuń wewnętrzny cień Textarea w Mobile Safari (iPhone)

152

Domyślnie wydaje się, że Mobile Safari dodaje górny wewnętrzny cień do wszystkich pól wejściowych, w tym do obszaru tekstowego. Czy jest sposób, aby to usunąć?

Jest to szczególnie brzydkie, gdy masz białe tło.

iphone mobile mobile-safari Lyon
źródło

Odpowiedzi:

340

Dodając ten styl CSS:

-webkit-appearance: none;
Lyon
źródło
26
zachowaj ostrożność dodając tę ​​właściwość do pola wyboru typu wejścia i przycisków opcji, ponieważ ukrywa ona pola wyboru i przyciski radiowe;)
Zain Shaikh
14
Dzięki za odpowiedź Lyon. Przy okazji, najlepszym sposobem na użycie go jest nałożenie go tylko na textarea, input[type="text"], input[type="submit"].
jgthms
8
Nie zapomnij input[type="password"]też.
Nick Pyett
7
Nie zapomnij [type="email"]też!
Willster
35
Może być łatwiejsze użycie operatora not w zależności od tego, jakiego typu wejściowego używasz:input:not([type=checkbox]):not([type=radio])
Justin Fisher
30

Dodając styl CSS

-webkit-appearance: none;

zadziała, pozbędzie się wszystkiego. Zamiast tego możesz spróbować tego:

box-shadow: none !important;

W ten sposób trzymasz strzałkę w dół.

Justin Tolchin
źródło
6
Samo dodanie właściwości box-shadow nie działa. Wewnętrzny cień nadal pojawia się w Safari na iOS.
Silentmouth
22

Oto proste rozwiązanie

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
IqbalBary
źródło
9

Czasami arkusz stylów może się zepsuć, appearance: none;więc sposobem na naprawienie tego, gdy tak się stanie, jest użycie caret. Najlepszym sposobem będzie przepisanie kodu i sprawdzenie, jaka jest jego część, aby zepsuć stylnone

Przed użyciem caretmusisz wiedzieć, że może to sprawić Ci problemy z innymi stylami

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

UWAGA: Użycie none, caretnie jest optymalna.

TheCrazyProfessor
źródło
-31

Wydaje się, że ustawienie właściwości tagu albo backgroundi bordercss inputrównież działa.

Spróbuj tego:

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

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>
MTS
źródło
9
Niepoprawne i wprowadzające w błąd. Przetestuj swój kod na odpowiednim urządzeniu przed wysłaniem…
Ariel,
Naprawdę zła odpowiedź, o nic nie pytają OP
Jacta