Powstrzymaj Safari Mobile przed nadaniem przyciskom wprowadzania zaokrąglonych rogów

82

Chyba temat mówi wszystko. Mam aplikację internetową, gdy przeglądam ją na iPhonie, iPodzie lub iPadzie, przyciski przesyłania danych wejściowych mają zaokrąglone rogi. Czy jest sposób, aby to zatrzymać?

ios mobile-safari

— Newbie Fletcher
źródło

185

Jeśli dodasz ...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

Wtedy Twoje przyciski odziedziczą wszystkie style CSS zastosowane w innych przeglądarkach.

— metoda działania
źródło

1

To nie działa na iPad2, iOS 5.1.1. Nie mam jednak pewności, że nie zadziała na innych urządzeniach iOAS, ponieważ nie mam żadnych, z którymi mógłbym go przetestować. Jednak Roel za -webkit-border-radius:0pxrozwiązanie czyni pracę.

— coredumperror,

Jeśli nie zastosujesz -webkit-look: none, Safari staje się wybredne pod względem właściwości, które można na nim zastosować (a mianowicie, font-sizei color. Najlepszym rozwiązaniem byłoby zastosowanie obu.

— methodofaction

Zgłaszanie w celu potwierdzenia, że to rozwiązanie działa na iPadzie, iOS 5.1.1.

— Dominor Novus

6

odpowiadając na komentarz sprzed 2 lat ... no cóż. -webkit-wygląd: brak; powoduje, że pola wyboru nie są widoczne w Chrome. Prawdopodobnie wpływa również na inne elementy i przeglądarki.

— matthew_360,

ŁAŁ!!! Godzinami szukaliśmy rozwiązania tego problemu w aplikacji Cordova i to było rozwiązanie! Nie mogę tego wystarczająco zagłosować !!!

— Jay Dinse

18

Nie działa dla mnie, wygląd zestawu -webkit: brak.

To robi:

input[type=submit] {
    -webkit-border-radius:0px;
}

Miałem ten sam problem z zaokrąglonymi rogami na przycisku z obrazem tła, tylko na iPhonie.

— Roel
źródło

1

Potwierdzenie: najwyższa głosowana odpowiedź tutaj (przez Duopixel) nie działa, ale odpowiedź Roela tak. Jest to prawdopodobnie spowodowane zmianami wprowadzonymi w implementacji mobilnego zestawu internetowego firmy Apple w międzyczasie.

— coredumperror,

@CoreDumpError - Masz na myśli, że to nie działa dla Ciebie . Rozwiązanie zadziałało dla mnie - właśnie je wdrożyłem. Nie wiem, dlaczego doświadczamy różnych wyników. Z drugiej strony, Twój post został utworzony ponad pół roku temu, więc nie mogę stwierdzić, czy nadal masz ten sam problem.

— Dominor Novus

@Roel, możesz po prostu mieć problemy z pierwszeństwem ...?

— Frank Nocke

13

Możesz spróbować użyć następującego CSS:

-webkit-appearance:none;

Więcej informacji: http://trentwalton.com/2010/07/14/css-webkit-appearance/

— dthukka
źródło

6

Odkryłem, że na iPadzie 2 musisz użyć:

-webkit-appearance:none;
border-radius: 0;

w klasie przycisków.

— Daniele F.
źródło

3

Miałem witrynę z typem przesyłania danych wejściowych = "obraz". Ta wersja powyższego naprawiła zaokrąglone rogi:

input[type=image] {
    -webkit-border-radius:0px;
}

— RevConcept
źródło

1

Odkryłem, że ustawienie background: linear-gradient(color1, color2)usuwa nadmiernie zaokrąglone rogi na urządzeniach Apple i działa na wszystkich innych przeglądarkach / platformach, które wypróbowałem.

— mait
źródło

To naprawiło problem i wydaje mi się, że najmniej prawdopodobna opcja powoduje niezamierzone skutki uboczne.

— Wim Deblauwe

1

Rozwiązałem przez dodanie kodu zarówno dla typu „przycisk”, jak i „prześlij”:

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

— AGalvis
źródło