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

Question

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

Desktop:

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

Это может быть расширено для применения ко всем компонентам form в стиле webkit, таким как 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

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

* { 
    -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 5

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

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

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.