Видаліть тінь введення iOS

У iOS (Safari 5) для елемента введення (верхня внутрішня тінь) я повинен дотримуватися:

Я хочу видалити верхню тінь, помилка -webkit-appearanceне зберігає.

Поточний стиль:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Вам потрібно буде використовувати, -webkit-appearance: none;щоб замінити стилі IOS за замовчуванням. Однак вибір лише inputтегу в CSS не замінить стилі IOS за замовчуванням, оскільки IOS додає свої стилі за допомогою селектора атрибутів input[type=text]. Тому ваш CSS повинен буде використовувати селектор атрибутів, щоб замінити попередньо встановлені стилі IOS CSS за замовчуванням.

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

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Корисні Посилання:

Ви можете дізнатись більше про це appearanceтут:

http://css-tricks.com/almanac/properties/a/appearance/

Якщо ви хочете дізнатись більше про селектори атрибутів CSS, ви можете знайти тут дуже інформативну статтю:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Здається, це також прибирає тіні.

Як згадував @davidpauljunior ; будьте обережні, встановлюючи -webkit-appearanceзагальний селектор введення.

webkit видалить усі властивості

-webkit-appearance: none;

Спробуйте скористатися властивістю box-shadow, щоб видалити тінь з елемента введення

box-shadow: none !important;

Я намагався придумати рішення, яке а.) Працює та б.) Я можу зрозуміти, чому воно працює .

Я знаю, що тінь для входів (і округла межа для введення [type = "search"]) походить від фонового зображення.

Очевидно, що налаштування background-image: noneбуло моєю першою спробою, але це, здається, не спрацювало.

Налаштування background-image: url()працює, але мене все ще турбує наявність пустого url(). Хоча в даний час це просто погане відчуття.

background-clip: padding-box; здається, це теж робить роботу, але навіть після прочитання документів "background-clip" я не розумію, чому це повністю видаляє фон.

Моє улюблене рішення:

background-image: linear-gradient(transparent, transparent);

Це дійсний css, і я розумію, як це працює.

Хоча прийнята відповідь є хорошим початком, як зазначали інші, вона працює лише для вхідних даних, чиї typeє "text". Існує безліч інших типів введення, які також відображаються як текстові поля на iOS, і тому нам потрібно розширити це правило, щоб врахувати ці інші типи.

Ось CSS, який я використовую для позбавлення текстових полів введення та текстових областей внутрішньої тіні, зберігаючи при цьому типовий стиль для кнопок, прапорців, повзунків діапазонів, спадних меню дати та часу та перемикачів, які також створені за допомогою <input>тегу humble .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Для мене це працює краще. Плюс це означає, що мені не потрібно застосовувати його до кожного іншого типу введення (тобто тексту, телефону, електронної пошти тощо).

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}