<input type = "search" > больше не показывает кнопку отмены (x) под iOS

<input type="search">

Все онлайн-статьи показывают, что и input с type=search будет иметь четкую кнопку с правой стороны ввода (на продуктах Apple).

Это все еще работает в Safari на MacOS, но в мобильном сафари (iOS9) это больше не работает.

Есть ли способ вернуть эту кнопку отмены поиска?

Я уже пробовал это:

input::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;}

Я также попытался дать ввод a name и value. Также помещаем его в form, но безрезультатно.

Я нашел страницу которая добавила кнопку с помощью css, но на моем iPhone нажатие кнопки поместит в эту кнопку каррель, которая является сверхъестественным и непригодным для использования.

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

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/(null)-SW1

Они по-прежнему ссылаются на него как поддерживаемые в ссылке выше, но эти документы не обновлялись с 2012 года, если вы посмотрите историю изменений, и я не могу найти более новые. Blarg. Я пробовал каждую комбинацию, которую я могу, но она просто не работает. Я думаю, что его можно с уверенностью предположить, поскольку это не должно быть так трудно заставить его работать, что они сломали или удалили его и не чувствовали, что это достаточно важно, чтобы упомянуть. В их документации говорится использовать что-то вроде этого CSS:

input {
    -webkit-appearance: searchfield;
}

*::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

В этот момент, как я сказал, сканируйте свой собственный или, возможно, даже файл с сообщением об ошибке, и, возможно, мы сможем узнать наверняка.

Ответ 2

Я не думаю, что это возможно только с <input type="search"> в iOS 9, вам нужно будет немного взломать.

Здесь приведен пример JSFIDDLE.

Ответ 3

Сбросьте его все вместе и используйте пользовательское решение css/js или уже работающие плагины, такие как devextreme, потому что иначе у вас будут проблемы с не поддерживаемыми браузерами или фреймворками, которые выполняют свой собственный стиль (например, Bootstrap).