iOS заставляет закругленные углы и блики на входах

94

Устройства iOS добавляют множество раздражающих стилей при вводе формы, особенно при вводе [type = submit]. Ниже показана одна и та же простая форма поиска в браузере для настольных ПК и на iPad.

Рабочий стол:

Рабочий стол

iPad:

iPad

В input [type = text] используется вставка тени блока CSS, и я даже указал -webkit-border-radius: none; который, по-видимому, отменяется. Цвет и форма моей кнопки ввода [type = submit] полностью изменяются на iPad. Кто-нибудь знает, что я могу сделать, чтобы это исправить? Заранее спасибо.

css ios forms неорганик
источник
4
-webkit-appearance: нет; Помогает устранить большинство проблем, но все же не устраняет зазор между двумя элементами или закругленные углы. Так что любая помощь по этому поводу будет оценена. Спасибо.
inorganik
2
Вы указали -webkit-border-radius:none;, вы указали border-radius:none;?
Ригель Глен
7
Уточнение -webkit-appearance:noneи -webkit-border-radius:0помогло мне в iOS!
Primus202

Ответы:

184

У меня была рабочая версия:

input {
    -webkit-appearance: none;
}

В некоторых версиях браузеров webkit вы также можете столкнуться с тем, что они border-radiusвсе еще существуют. Выполните сброс следующим образом:

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

Это может быть расширено , чтобы применить ко всем WebKit стиле formкомпонентов , таких как input, select, buttonили textarea.

Что касается исходного вопроса, вы бы не использовали значение «none» при очистке любого элемента css на основе модуля. Также имейте в виду, что это скрывает флажки в Chrome, поэтому, возможно, используйте что-то вроде input[type=text]или input[type=submit], input[type=text]или вместо этого отфильтруйте те, которые не используют настройки закругленных углов, такие как input:not([type=checkbox]), input:not([type=radio]).

Marksyzm
источник
5
-webkit-appearance: нет; Скрывает флажки в Chrome - недопустимое решение!
Нико Вестердейл
2
-webkit-appearance: нет; делает свое дело! (-webkit-border-radius не требуется)
OZZIE
Хороший момент - действительно зависит от версии браузера, которую я нашел, так что это просто для обеспечения отказоустойчивости. Отредактирую пост на актуальность.
marksyzm
3
input: not ([type = "checkbox"]) было бы лучшим способом избежать проблемы в Chrome? Хотя это не сработает в IE <= 8, но опять же, это не то, что вы пытаетесь исправить.
Робин Френч,
Использование input:not([type=checkbox]), input:not([type=radio])означает, что стиль применяется ко всем кнопкам в Safari, поскольку каждая кнопка удовлетворяет одному из этих двух условий. Вместо этого я использовал input[type=submit], input[type=text].
miguelmorin
17

Вы можете избавиться от некоторых дополнительных стилей форм, ввода и т. Д. С помощью этого:

input, textarea, select {
   -webkit-appearance: none;
}
Ник
источник
Ему все равно нужно border-radius: 0;будет полностью сбросить и не нужен радиус границы. Остальное просто установите border-radius.
Refilon
3

Для кнопки отправки не используйте:

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

Вместо этого используйте тег кнопки:

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

Это сработало для меня.

Цифровой робот-горилла
источник
1
FWIW, эта проблема только что возникла в проекте, и iPad 1, который я тестировал, также добавил стили к <button>тегам. Поэтому я думаю, вам лучше решить эту проблему напрямую с помощью CSS.
neemzy
1

взглянуть на normalize.css

Есть демонстрация, в которой вы можете протестировать элементы формы и посмотреть, как они выглядят в iOS. Есть несколько свойств, ориентированных на webkit.

Rdpi
источник
1

Это то, что я использую в своих проектах

* { 
    -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; 
}
Вакар Аламгир
источник
0

Эта проблема также возникает в некоторых браузерах, если у вас есть следующее:

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

вместо того:

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

Это может произойти, если вы измените свой элемент ввода на элемент анкер и забудете изменить его typeнаrole .

У меня была эта проблема как в Chrome, так и в Safari на моем IPad.

Дирк
источник