Usuń cień wejściowy iOS

Na iOS (Safari 5) muszę wykonać następujące czynności dla elementu wejściowego (górny wewnętrzny cień):

Chcę usunąć górny cień, błąd -webkit-appearancesię nie zapisuje.

Obecny styl to:

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

Musisz użyć, -webkit-appearance: none;aby zastąpić domyślne style IOS. Jednak wybranie samego inputznacznika w CSS nie nadpisze domyślnych stylów IOS, ponieważ IOS dodaje swoje style za pomocą selektora atrybutów input[type=text]. Dlatego twój CSS będzie musiał użyć selektora atrybutu, aby zastąpić domyślne style CSS IOS, które zostały wstępnie 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;    
}

Przydatne linki:

Możesz dowiedzieć się więcej o tym appearancetutaj:

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

Jeśli chcesz dowiedzieć się więcej o selektorach atrybutów CSS, możesz znaleźć bardzo pouczający artykuł tutaj:

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

background-clip: padding-box;

Wydaje się, że również usuwa cienie.

Jak wspomniał @davidpauljunior ; uważaj przy ustawianiu -webkit-appearanceogólnego selektora wejścia.

webkit usunie wszystkie właściwości

-webkit-appearance: none;

Spróbuj użyć właściwości box-shadow, aby usunąć cień z elementu wejściowego

box-shadow: none !important;

Próbowałem znaleźć rozwiązanie, które a.) Działa i b.) Jestem w stanie zrozumieć, dlaczego to działa .

Wiem, że cień dla danych wejściowych (i zaokrąglona ramka dla danych wejściowych [typ = "szukaj"]) pochodzi z obrazu tła.

Więc oczywiście ustawienie background-image: nonebyło moją pierwszą próbą, ale to nie wydaje się działać.

Ustawienie background-image: url()działa, ale nadal martwię się, że mam pusty url(). Chociaż obecnie to tylko złe przeczucie.

background-clip: padding-box; wydaje się, że to również spełnia swoje zadanie, ale nawet po przeczytaniu dokumentacji "background-clip" nie rozumiem, dlaczego to całkowicie usuwa tło.

Moje ulubione rozwiązanie:

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

To jest poprawny css i rozumiem, jak to działa.

Chociaż zaakceptowana odpowiedź jest dobrym początkiem, jak zauważyli inni, działa ona tylko w przypadku danych wejściowych, których typejest "text". Istnieje mnóstwo innych typów danych wejściowych, które również renderują się jako pola tekstowe w systemie iOS, dlatego musimy rozszerzyć tę regułę, aby uwzględnić te inne typy.

Oto CSS, którego używam, aby pozbyć się pól tekstowych wejściowych i obszarów tekstowych wewnętrznego cienia, zachowując jednocześnie domyślny styl przycisków, pól wyboru, suwaków zakresu, menu rozwijanych daty / czasu i przycisków opcji, z których wszystkie zostały również utworzone przy użyciu skromnego <input>tagu .

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

To działa lepiej dla mnie. Dodatkowo oznacza to, że nie muszę go stosować do każdego rodzaju danych wejściowych (np. Tekst, tel, e-mail itp.).

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