Dziwny rendering przycisku CSS na iPadzie / iPhonie

222

Zauważyłem, że jeśli stylizuję moje przyciski za pomocą CSS przy użyciu promienia, kolorów i obramowań, wyglądają dobrze, ale na iPhone / iPad / ipod wyglądają okropnie ... nie powinny być takie same renderowania jak w Safari Desktop?

wprowadź opis zdjęcia tutaj

— Francesco
źródło

możliwy duplikat stylu css dla przycisków wejściowych na

— iPadzie

Odpowiedzi:

453

ups! właśnie się znalazłem: po prostu dodaj tę linię do dowolnego elementu, którego potrzebujesz

   -webkit-appearance: none;

— Francesco
źródło

kocham cię, stackoverflow i @Francesco

— jahrichie

Genialne, a oto świetny artykuł na ten temat z trików CSS. Zawiera listę wszystkich pozostałych elementów zmienionych przez WebKit i Mozillę.

— Patrick,

Kompas ma również mixin do tego również compass-style.org/reference/compass/css3/appearance

— Patrick Beeson

Chciałbym zrobić to wyszukiwanie Google 12 godzin temu ... DZIĘKUJĘ.

— Elly Post

Naprawdę świetnie! nie sądziłem, że ten problem wystąpił również w iOS! Jeszcze raz bardzo za to dziękuję!

— Saurabh Prajapati

Dodaj ten kod do pliku css:

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

To pomoże.

— subindas pm
źródło

Wspaniały! Przycisk przesyłania formularza wygląda teraz tak, jak powinien na moim iPadzie

— peterkodermac

@peterkodermac nie zapomnij dodać nadrzędnej klasy CSS, w przeciwnym razie może to wpłynąć na każde pole wejściowe.

— subindas pm

Powyższa odpowiedź na wygląd zestawu internetowego zadziałała magicznie, ale przycisk nadal wyglądał nieco blado / matowo w porównaniu z przeglądarką na innych urządzeniach / komputerach. Musiałem także ustawić pełne krycie (zakres od 0 do 1)

-webkit-appearance:none;
opactiy: 1

Po ustawieniu krycia przycisk wyglądał tak samo na wszystkich różnych urządzeniach / emulatorze / pulpicie.

— Priyank Thakkar
źródło