Удалить ввод прошивкой тень

на 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;
}
4 53
ios css input

4 ответа:

вам понадобится -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/

126
background-clip: padding-box;

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

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

23

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

-webkit-appearance: none;

попробуйте с помощью свойства box-shadow удалить тень на вашем элементе ввода

box-shadow: none !important;
6

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

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