Wyłącz zaokrąglanie elementów wejściowych iPhone / Safari

374

Moja witryna renderuje się dobrze w przeglądarce iPhone / Safari, z jednym wyjątkiem: Moje pola wprowadzania tekstu mają dziwny zaokrąglony styl, który wcale nie wygląda dobrze z resztą mojej witryny.

Czy istnieje sposób na instruowanie Safari (za pomocą CSS lub metadanych), aby nie zaokrąglały pól wejściowych i nie renderowały ich prostokątnie zgodnie z przeznaczeniem?

— Alex
źródło

1

Zastanawiam się, dlaczego ŻADNY reset CSS wydaje się zawierać tę super łatwą regułę css. To braindead.

— Toskan

1

Naprawdę stworzyłem reset CSS na podstawie resetu css eric Meyera 2 z dodanym niezbędnym css, który znajdziesz w odpowiedzi tutaj. Jest dostępny na github: github.com/Jossnaz/JossiCssReset

— Toskan

1

Uważaj -webkit-appearance: none;, myślę, że lepiej ograniczyć ten warunek do zakresu określonego elementu wejściowego. W przeciwnym razie może ukryć elementy wejściowe radia, jeśli masz je na stronie.

— quas

659

Na iOS 5 i nowszych, dobra ol ' border-radiusrozwiązuje problem:

input {
    border-radius: 0;
}

Jeśli musisz tylko usunąć zaokrąglone rogi w systemie iOS lub z jakiegoś powodu nie można normalizować zaokrąglonych rogów na różnych platformach, użyj -webkit-border-radiuszamiast tego prefiksowanej właściwości, która jest nadal obsługiwana. Oczywiście należy pamiętać, że Apple może w dowolnym momencie zrezygnować z obsługi prefiksowanej właściwości, ale biorąc pod uwagę inne funkcje CSS specyficzne dla platformy, prawdopodobnie utrzymają ją.

W starszych wersjach trzeba było -webkit-appearance: nonezamiast tego ustawić :

input {
    -webkit-appearance: none;
}

— BoltClock
źródło

1

Począwszy od iOS 5, usunie to tylko wewnętrzny cień. Sprawdź odpowiedź Piyusha, aby usunąć również zaokrąglone rogi.

— Jonathan Freeland,

6

-webkit-appearancewłaściwie nie ma nic wspólnego z wewnętrznym cieniem i zaokrąglonymi narożnikami. Nie używaj go tylko do tego. css-infos.net/property/-webkit-appearance

— Rudie

13

„Jeśli IOS chce zaokrąglić rogi i cienie, pozwól użytkownikom IOS je mieć”: To jest całkowicie nie do przyjęcia w mojej sytuacji i prawdopodobnie także w większości innych.

— coredumperror

2

!! nie powinieneś używać tej metody, sprawia, że pole wyboru wydaje się niedostępne Z tego powodu wielu moich użytkowników witryny nie przystępuje do umowy o płatności. !!

— synteza

10

Na <input type="search">iOS 10 nadal potrzebowałem -webkit-appearance: none;.

— Gabriel Smoljár

54

input -webkit-appearance: none; sam nie działa.

Spróbuj dodać -webkit-border-radius:0px;dodatkowo.

— justadev
źródło

1

Musiałem dodać -webkit-border-radiusatrybut, aby <input type="text">usunąć zaokrąglone rogi w iOS 5.

— Jonathan Freeland,

Nie trzeba dodawać px po 0

— mintedsky

42

Jest to najlepszy sposób na usunięcie zaokrąglonego w IOS.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Uwaga: nie używaj tego kodu do wyboru opcji. Będzie miał problem z naszymi wybranymi.

— KoemsieLy
źródło

2

Przekonałem się, że użycie input[type]wydaje się załatwić wszystkie wejścia.

— JacobTheDev,

11

Przyjęta odpowiedź sprawiła, że przycisk opcji zniknął w Chrome. To działa:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

— François Romain
źródło

7

Oto kompletne rozwiązanie dla Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

— Johansrk
źródło

14

Tylko uwaga, @include border-radius(0);mixin jest dostępny tylko wtedy, gdy sam go zdefiniowałeś lub używasz frameworka Compass, a nie tylko waniliowej SASS.

— waffl

Tylko uwaga, jeśli używasz SCSS, prawdopodobnie powinieneś również używać autoprefixera.

— Christian

6

W przypadku systemu iOS 5.1.1 na telefonie iPhone 3GS musiałem wyczyścić pole wyszukiwania i ustawić go zgodnie z przeznaczeniem

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

Robienie -webkit-border-radius: 0;samemu nie wyczyściło natywnego stylu. Dotyczyło to również widoku internetowego w natywnej aplikacji.

— Chris Bernardi
źródło

4

Miałem ten sam problem, ale tylko przycisk wysyłania. Potrzebne do usunięcia wewnętrznego cienia i zaokrąglonych rogów -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

— seanjacob
źródło

4

Jeśli użyjesz normalize.css, ten arkusz stylów zrobi coś takiego input[type="search"] { -webkit-appearance: textfield; }.

Ma to wyższą specyficzność niż pojedynczy selektor klasy .foo, więc pamiętaj, że nie możesz tego zrobić .my-field { -webkit-appearance: none; }. Jeśli nie masz lepszego sposobu na osiągnięcie właściwej specyfiki, pomoże to:

.my-field { -webkit-appearance: none !important; }

— Henrik N.
źródło

4

Spróbuj tego:

Spróbuj dodać inputCss w ten sposób:

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

— Ivin Raj
źródło

3

Użyłem prostego promienia obramowania: 0; aby usunąć zaokrąglone rogi dla typów wprowadzania tekstu.

— Jesse
źródło

0

Aby poprawnie wyrenderować przyciski w przeglądarce Safari i innych przeglądarkach, oprócz ustawienia wyglądu zestawu webkit musisz nadać mu określony styl, np .:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

— CpnCrunch
źródło