Usuń iOS wejściowego cień

Question

iOS (Safari 5) Mam do następujących dla elementu wejściowego (górny cień wewnętrzny):

Chcę usunąć górny cień, bug -webkit-appearance nie zapisać.

Obecny styl:

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; 
} 

Answer 1

Musisz użyć -webkit-appearance: none; przesłonić domyślne style iOS. Jednak wybranie tylko znacznika input w CSS nie zastąpi domyślnych stylów IOS, ponieważ IOS dodaje style za pomocą selektora atrybutów input[type=text]. Dlatego Twój CSS będzie musiał użyć selektora atrybutu, aby nadpisać domyślne style CSS IOS, które zostały wcześniej ustawione.

Spróbuj tego:

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;  
} 

Pomocne linki:

Możesz dowiedzieć się więcej o appearance tutaj:

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

Jeśli chcesz dowiedzieć się więcej na temat selektorów atrybutów CSS, można znaleźć artykuł bardzo pouczające tutaj:

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

Answer 2

WebKit usunie wszystkie właściwości

-webkit-appearance: none; 

Try za pomocą właściwości box-shadow usunąć cień z elementu wejściowego

box-shadow: none !important; 

Answer 3

background-clip: padding-box; 

Wydaje się również usuwać cienie.

Jako wspomniana @davidpauljunior; zachowaj ostrożność ustawiając -webkit-appearance na ogólnym selektorze wejść.

Answer 4

To działa lepiej dla mnie. Dodatkowo oznacza to, że nie muszę stosować go do każdego innego rodzaju danych wejściowych (tj. Tekstu, teleksu, e-maila itd.).

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