Hapus textarea inner shadow di Mobile Safari (iPhone)

152

Secara default, tampaknya Mobile Safari menambahkan bayangan bagian dalam atas ke semua bidang input, termasuk textarea. Apakah ada cara untuk menghapusnya?

Ini terutama jelek ketika Anda memiliki latar belakang putih.

iphone mobile mobile-safari Lyon
sumber

Jawaban:

340

Dengan menambahkan gaya css ini:

-webkit-appearance: none;
Lyon
sumber
26
hati-hati saat menambahkan properti ini pada kotak centang tipe input dan pemilih tombol radio, karena menyembunyikan kotak centang dan tombol radio;)
Zain Shaikh
14
Terima kasih atas jawabannya Lyon. Btw, cara terbaik untuk menggunakannya adalah hanya menerapkannya textarea, input[type="text"], input[type="submit"].
jgthms
8
Jangan lupa input[type="password"]juga.
Nick Pyett
7
Jangan lupa [type="email"]juga!
Willster
35
Mungkin lebih mudah menggunakan operator yang tidak bergantung pada tipe input apa yang Anda gunakan:input:not([type=checkbox]):not([type=radio])
Justin Fisher
30

Sambil menambahkan gaya CSS

-webkit-appearance: none;

akan bekerja, itu menghilangkan segalanya. Anda mungkin ingin mencoba ini sebagai gantinya:

box-shadow: none !important;

Dengan cara ini Anda menjaga panah bawah.

Justin Tolchin
sumber
6
Hanya menambahkan properti bayangan kotak tidak bekerja. Bayangan batin masih muncul di Safari di iOS.
silentmouth
22

Ini solusi mudahnya

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

Kadang-kadang Anda dapat memiliki stylesheet di sana appearance: none;sehingga cara untuk memperbaikinya ketika itu terjadi adalah dengan menggunakancaret . Cara terbaik adalah menulis ulang kode Anda dan mencari tahu bagian mana dari kode Anda di sananone

Sebelum menggunakan caretAnda perlu tahu bahwa itu bisa membuat Anda kesulitan dengan gaya lain

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

CATATAN: Gunakan none, caretbukan yang optimal.

TheCrazyProfessor
sumber
-31

Pengaturan salah satu backgrounddan borderproperti css dariinput tag juga tampaknya berfungsi.

Coba ini:

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

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>
MTS
sumber
9
Tidak benar dan menyesatkan. Silakan uji kode Anda pada perangkat yang tepat sebelum memposting ...
Ariel
Jawaban yang benar-benar salah, tidak ada yang ditanyakan oleh OP
Jacta