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.

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