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

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

3

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

dan saya menemukan komentar jawaban yang sama lebih tua di sini.

https://stackoverflow.com/a/29750016/9287284

— KABA
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