Видаліть внутрішню тінь textarea на мобільному Safari (iPhone)

152

За замовчуванням мобільний Safari додає верхню внутрішню тінь до всіх полів введення, включаючи textarea. Чи є спосіб її видалити?

Це особливо некрасиво, коли у тебе білий фон.

iphone mobile mobile-safari

— Ліон
джерело

340

Додавши цей стиль css:

-webkit-appearance: none;

— Ліон
джерело

26

будьте обережні, додаючи цю властивість у полі введення типу та перемикачах перемикачів, оскільки вона приховує прапорці та радіо кнопки;)

— Zain Shaikh

14

Дякую за відповідь Ліон. До речі, найкращий спосіб використовувати це - застосувати його лише до textarea, input[type="text"], input[type="submit"].

— jgthms

8

Не забувайте input[type="password"]також.

— Нік Піетт

7

Не забувайте [type="email"]також!

— Уілстер

35

Можливо, простішим буде використання оператора, який не використовується, залежно від того, які типи вводу використовуєте:input:not([type=checkbox]):not([type=radio])

— Джастін Фішер

30

Додаючи стиль CSS

-webkit-appearance: none;

буде працювати, він позбудеться всього. Ви можете спробувати це замість цього:

box-shadow: none !important;

Таким чином ви тримаєте стрілку вниз.

— Юстін Толчин
джерело

6

Просто додавання властивості box-shadow не працює. Внутрішня тінь все ще з’являється в Safari на iOS.

— silentmouth

22

Ось просте рішення

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

— IqbalBary
джерело

9

Іноді у вас може бути таблиця стилів, яка порушила appearance: none;такий спосіб, щоб виправити це, коли це трапиться, це використовувати caret. Найкращим способом буде переписати свій код і дізнатись, яка частина вашого коду там зіпсує стильnone

Перш ніж використовувати caret, потрібно знати, що це може принести вам певні проблеми з іншими стилями

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

Примітка: Використання none, caretне є оптимальним.

— TheCrazyProfessor
джерело

3

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

background-clip: padding-box;

і я знайшов старіші коментарі з тими самими відповідями тут.

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

— КАБА
джерело

-31

Налаштування або тегів backgroundта bordercss inputтегів також здається працює.

Спробуйте це:

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

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

— МТС
джерело

9

Неправильно та вводити в оману. Будь ласка, протестуйте свій код на потрібному пристрої перед публікацією ...

— Аріель

Дійсно неправильна відповідь, нічого про це не запитують ОП

— Джакта