iOS wymusza zaokrąglenie rogów i olśnienie na danych wejściowych

94

Urządzenia z systemem iOS dodają wiele irytujących stylów do danych wejściowych formularzy, zwłaszcza danych wejściowych [type = submit]. Poniżej pokazano ten sam prosty formularz wyszukiwania w przeglądarce na komputerze i na iPadzie.

Pulpit:

Pulpit

iPad:

iPad

Dane wejściowe [type = text] używają wstawki cienia ramki CSS, a nawet określiłem -webkit-border-radius: none; który najwyraźniej zostaje nadpisany. Kolor i kształt mojego przycisku wejściowego [typ = wyślij] są całkowicie bastardowane na iPadzie. Czy ktoś wie, co mogę zrobić, aby to naprawić? Z góry dziękuję.

css ios forms nieorganik
źródło
4
-webkit-wygląd: brak; Pomaga wyeliminować większość problemów, ale nadal nie eliminuje luki między dwoma elementami ani zaokrąglonych rogów. Więc każda pomoc w tej sprawie byłaby mile widziana. Dzięki.
inorganik
2
Podałeś, -webkit-border-radius:none;czy określiłeś border-radius:none;?
Rigel Glen
7
Określenie -webkit-appearance:nonei załatwienie -webkit-border-radius:0sprawy na iOS dla mnie!
Primus202

Odpowiedzi:

184

Wersja, w której pracowałem, to:

input {
    -webkit-appearance: none;
}

W niektórych wersjach przeglądarek Webkit możesz również napotkać rozszerzenie border-radius nadal . Zresetuj, wykonując następujące czynności:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

To może być rozszerzone na wszystkich WebKit stylu formelementów, takich jak input, select, buttonlub textarea.

Odnosząc się do pierwotnego pytania, nie używałbyś wartości „none” podczas czyszczenia dowolnego elementu css opartego na jednostkach. Pamiętaj również, że ukrywa to pola wyboru w Chrome, więc być może użyj czegoś takiego jak input[type=text]lub input[type=submit], input[type=text]lub zamiast tego odfiltruj te, które nie używają ustawień zaokrąglonych rogów, takich jak input:not([type=checkbox]), input:not([type=radio]).

marksyzm
źródło
5
-webkit-wygląd: brak; Ukrywa pola wyboru w Chrome - niewłaściwe rozwiązanie!
Nico Westerdale
2
-webkit-wygląd: brak; Zrób sztuczkę! (-webkit-border-radius nie jest potrzebny)
OZZIE,
Słuszna uwaga - to zależy od wersji przeglądarki, którą znalazłem, więc jest to po prostu bezpieczne. Zmienię post pod kątem trafności.
marksyzm
3
input: not ([type = "checkbox"]) byłby lepszym sposobem uniknięcia problemu w Chrome? Chociaż to nie zadziała w IE <= 8, ale z drugiej strony, to nie jest to, co próbujesz naprawić.
Robin French
Użycie input:not([type=checkbox]), input:not([type=radio])oznacza, że ​​styl dotyczy wszystkich przycisków w przeglądarce Safari, ponieważ każdy przycisk spełnia jeden z tych dwóch warunków. Zamiast tego użyłem input[type=submit], input[type=text].
miguelmorin
17

Możesz pozbyć się więcej formularzy webkitów, danych wejściowych itp. Za pomocą tego:

input, textarea, select {
   -webkit-appearance: none;
}
nacięcie
źródło
Nadal musiałby border-radius: 0;całkowicie zresetować się i nie chciałby mieć border-radius. W przeciwnym razie po prostu ustaw border-radius.
Refilon
3

W przypadku przycisku przesyłania nie używaj:

<input type="submit" class="yourstylehere" value="submit" />

Zamiast tego użyj tagu przycisku:

<button type="submit" class="yourstylehere">Submit</button>

To zadziałało dla mnie.

Cyfrowy robot Gorilla
źródło
1
FWIW, właśnie miał ten problem w projekcie, a iPad 1, na którym testowałem, również dodał style do <button>tagów. Więc myślę, że lepiej będzie rozwiązać to bezpośrednio za pomocą CSS.
neemzy
1

spojrzeć na normalize.css

Dostępna jest wersja demonstracyjna, w której możesz przetestować elementy formularza i zobaczyć, jak wyglądają w iOS. Istnieje wiele właściwości zorientowanych na Webkit.

Rdpi
źródło
1

To jest to, czego używam w moich projektach

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}
Waqar Alamgir
źródło
0

Ten problem występuje również w niektórych przeglądarkach, jeśli masz:

<a class="btn btn-primary" href="#" type="button">Link</a>

zamiast:

<a class="btn btn-primary" href="#" role="button">Link</a>

Może się to zdarzyć, jeśli zmienisz elementu wejściowego dla elementu Anker i zapomnij zmian typedo role.

Miałem ten problem zarówno w Chrome, jak i Safari na moim iPadzie.

Sztylet
źródło