Xóa bóng bên trong textarea trên Mobile Safari (iPhone)

Theo mặc định, có vẻ như Mobile Safari bổ sung bóng bên trong trên cùng cho tất cả các trường đầu vào, bao gồm cả textarea. Có cách nào để loại bỏ nó?

Nó đặc biệt xấu khi bạn có một nền trắng.

Bằng cách thêm kiểu css này:

-webkit-appearance: none;

Trong khi thêm kiểu CSS

-webkit-appearance: none;

sẽ làm việc, nó được thoát khỏi mọi thứ. Bạn có thể muốn thử điều này thay vào đó:

box-shadow: none !important;

Bằng cách này bạn giữ mũi tên xuống.

Đây là giải pháp dễ dàng

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

Đôi khi bạn có thể có một bản định kiểu ở đó đã phá vỡ appearance: none;vì vậy một cách để khắc phục nó khi điều đó xảy ra là sử dụng caret. Cách tốt nhất sẽ là viết lại mã của bạn và tìm ra phần nào trong mã của bạn ở đó làm rối tung phong cách chonone

Trước khi sử dụng, caretbạn cần biết rằng nó có thể khiến bạn gặp một số rắc rối với các kiểu khác

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

LƯU Ý: Sử dụng none, caretkhông phải là tối ưu.

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

background-clip: padding-box;

và tôi tìm thấy một câu trả lời cũ hơn bình luận ở đây.

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

Đặt thuộc tính hoặc backgroundvà bordercss của inputthẻ dường như cũng hoạt động.

Thử cái này:

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

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