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

Moja strona renderuje się dobrze na przeglądarce iPhone/Safari, z jednym wyjątkiem: moje pola wprowadzania tekstu mają dziwny zaokrąglony styl, który nie wygląda dobrze z resztą mojej strony.

Czy istnieje sposób, aby Safari (poprzez CSS lub metadane) nie zaokrąglało pól wejściowych i nie renderowało ich prostokątnie zgodnie z przeznaczeniem?

Author: userlond, 2010-05-27
Source

11 answers

Na iOS 5 i nowszych: 

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

Jeśli musisz usunąć tylko zaokrąglone rogi w systemie iOS lub z jakiegoś powodu nie możesz znormalizować zaokrąglonych rogów na platformach, użyj właściwości input { -webkit-border-radius: 0; }, która jest nadal obsługiwana. Oczywiście należy pamiętać, że Apple może zrezygnować z obsługi prefiksu właściwości w dowolnym momencie, ale biorąc pod uwagę ich inne funkcje CSS specyficzne dla platformy, są szanse, że będą je utrzymywać.

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

input {
    -webkit-appearance: none;
}
 675
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-17 10:29:48

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

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

 58
Author: justadev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-21 16:19:35

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

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

Uwaga: Proszę nie używać tego kodu dla opcji Select. Będzie miał problem na naszym select.

 43
Author: KoemsieLy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-21 02:32:20

Zaakceptowana odpowiedź sprawiła, że Przycisk radiowy zniknął na Chrome. To działa: 

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
 10
Author: François Romain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-16 17:52:00

Dla mnie na iOS 5.1.1 na iPhone 3GS musiałem wyczyścić stylizację pola wyszukiwania i ustawić go na zamierzony styl 

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

Robienie -webkit-border-radius: 0; samodzielnie nie wyczyściło rodzimej stylizacji. To było również dla webview na natywnej aplikacji.

 7
Author: Chris Bernardi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-23 16:59:06

Oto kompletne rozwiązanie dla kompasu (SCSS): 

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
 7
Author: Johansrk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-01 08:04:56

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

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
 5
Author: seanjacob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-05 16:55:54

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

Ma to wyższą specyficzność niż pojedynczy selektor klas, taki jak .foo, więc pamiętaj, że nie możesz zrobić tylko .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; }

 4
Author: Henrik N,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-09 11:04:19

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

 3
Author: Jesse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-12 01:15:53

Proszę spróbować tego:

Spróbuj dodać input Css TAK: 

 -webkit-appearance: none;
       border-radius: 0;
 3
Author: Ivin Raj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-18 05:40:54

W celu poprawnego renderowania przycisków w Safari i innych przeglądarkach, oprócz ustawienia webkit-appearance na none, musisz nadać przyciskom określony styl, np.: 

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
 0
Author: CpnCrunch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-15 20:51:43