Удалить входную тень iOS

В iOS (Safari 5) мне нужно следовать за элементом ввода (верхняя внутренняя тень):

example

Я хочу удалить верхнюю тень, ошибка -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;
}

Ответы

Ответ 1

Вам нужно использовать -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, вы можете найти здесь очень информативную статью:

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

Ответ 2

background-clip: padding-box;

Кажется, удалять тени также.

Как упоминалось @davidpauljunior; будьте осторожны при установке -webkit-appearance на общем селекторе входов.

Ответ 3

webkit удалит все свойства

-webkit-appearance: none;

Попробуйте использовать тень свойств, чтобы удалить тень на свой элемент ввода

box-shadow: none !important;

Ответ 4

Это работает лучше для меня. Плюс это означает, что мне не нужно применять его к каждому типу ввода (т.е. Текст, тел, электронная почта и т.д.).

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