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

Question

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

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

IPAD:

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

Answer 1

Версия, на которой я работал:

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:not([type=checkbox]), input:not([type=radio]) вместо.

Answer 2

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

input, textarea, select {
   -webkit-appearance: none;
}

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

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

* { 
    -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; 
}

Answer 6

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

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

вместо:

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

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

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