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

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

Desktop:

IPad:

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

Ответ 1

В моей версии была версия:

input {
    -webkit-appearance: none;
}

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

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

Это можно расширить, применив ко всем составляющим form вебкайт form, таким как input, select, button или textarea.

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

посмотрите normalize.css

Там есть демо, где вы можете протестировать элементы формы и посмотреть, как они выглядят в ios. Существует несколько свойств, ориентированных на веб-кит.

Ответ 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; 
}

Ответ 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.