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-appearance
się 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;
}
input
selektorze ogólnym . Może powodować niepożądane efekty na przyciskach opcji i polach wyboru.Odpowiedzi:
Musisz użyć,
-webkit-appearance: none;
aby zastąpić domyślne style IOS. Jednak wybranie samegoinput
znacznika w CSS nie nadpisze domyślnych stylów IOS, ponieważ IOS dodaje swoje style za pomocą selektora atrybutówinput[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
appearance
tutaj: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/
źródło
input[type=password]
.textarea, input[type="range"], input, input:matches([type="password"], [type="search"])
- po prostu użyj go i powinien działać we wszystkich przypadkach.!important
oappearance
.appearance
Powinien również działać dlaselect
s.background-clip: padding-box;
Wydaje się, że również usuwa cienie.
Jak wspomniał @davidpauljunior ; uważaj przy ustawianiu
-webkit-appearance
ogólnego selektora wejścia.źródło
background-clip: padding-box;
usunie cień w polu wprowadzania tekstu w systemie iOS. Zobacz na przykład codepen.io/jstnrs/pen/YXBLVN (pamiętaj, aby otworzyć adres URL na urządzeniu z systemem iOS).-webkit-appearance: none;
tak.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;
źródło
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: none
było moją pierwszą próbą, ale to nie wydaje się działać.Ustawienie
background-image: url()
działa, ale nadal martwię się, że mam pustyurl()
. 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.
źródło
background-clip: padding-box !important
działało.background-image: linear-gradient(transparent, transparent) !important;
działa dla Ciebie? Chętnie dowiem się, o co chodzi.Chociaż zaakceptowana odpowiedź jest dobrym początkiem, jak zauważyli inni, działa ona tylko w przypadku danych wejściowych, których
type
jest"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; }
źródło
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; }
źródło