В 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 нужно будет использовать селектор атрибутов для переопределения стилей CSS IOS по умолчанию, которые были предварительно установлены.
Попробуйте следующее:
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, вы можете найти здесь очень информативную статью:
background-clip: padding-box;
Кажется, удалять тени также.
Как упоминалось @davidpauljunior; будьте осторожны при установке -webkit-appearance на общем селекторе входов.
webkit удалит все свойства
-webkit-appearance: none;
Попробуйте использовать тень свойств, чтобы удалить тень на свой элемент ввода
box-shadow: none !important;
Это работает лучше для меня. Плюс это означает, что мне не нужно применять его к каждому типу ввода (т.е. Текст, тел, электронная почта и т.д.).
* {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}