Ответ 1
Итак, позвольте мне начать с того, как я добрался до места, где я. Сначала я загрузил вход как type="search" в OS X и iOS 9. Я видел, как вы это делали, он работал на OS X, но не на iOS. Поэтому я начал расследование. Когда я смотрел под доступность без текста во входном файле, у него был только один дочерний элемент. Когда я набрал текст, у него вдруг получилось два.
Смотрите в нижнем углу под доступностью. Когда я нависаю над div:role(button), он выделяет немного четкого X, как вы можете видеть выше. Итак, я тестировал одно и то же в iOS, и он действительно делает то же самое, только когда вы наводите указатель на один и тот же элемент, он ничего не выделяет. Таким образом, он добавляется сафари в iOS.
Затем я начал играть с некоторым CSS. Моя первая мысль заключалась в том, что если бы он не показывал, возможно, это просто проблема с отображением, и поэтому я добавил это.
::-webkit-search-cancel-button {
height: 10px;
width: 10px;
display: inline-block;
background: blue;
}
Который теперь получил меня в iOS:
Так оно и есть, но по какой-то причине iOS скрыт и не получает никакого контента. Также щелчок по нему не очищает поле поиска, как только вы заставите его быть видимым. Я все еще общаюсь с ним, но сейчас кажется, что они сломали его. Умышленно или нет. Я не уверен. Пока что решение CSS и JavaScript может вернуть вас туда, где вы хотите быть быстрее. Я обновлю ответ, если найду что-нибудь еще.
ИЗМЕНИТЬ
Это сводит меня с ума. Я просмотрел всю их документацию разработчика для сафари и iOS.
Они по-прежнему ссылаются на него как поддерживаемые в ссылке выше, но эти документы не обновлялись с 2012 года, если вы посмотрите историю изменений, и я не могу найти более новые. Blarg. Я пробовал каждую комбинацию, которую я могу, но она просто не работает. Я думаю, что его можно с уверенностью предположить, поскольку это не должно быть так трудно заставить его работать, что они сломали или удалили его и не чувствовали, что это достаточно важно, чтобы упомянуть. В их документации говорится использовать что-то вроде этого CSS:
input {
-webkit-appearance: searchfield;
}
*::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
В этот момент, как я сказал, сканируйте свой собственный или, возможно, даже файл с сообщением об ошибке, и, возможно, мы сможем узнать наверняка.