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?

html css iphone mobile-safari css-reset 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

Odpowiedzi:

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