ここから私がどこに来たのかを始めましょう。最初に、入力をOS XとiOS 9にtype="search"としてロードしました。あなたがOS Xでは動作するが、iOSでは動作しないことがわかりました。だから私は調査を始めた。入力にテキストがないアクセシビリティの下では、子要素が1つしかありませんでした。テキストを入力すると突然2つあった。
は、アクセシビリティの下の下の隅に参照してください。 div:role(button)の上にカーソルを置くと、上でわかるように、少しクリアなXが強調表示されます。だから、私はiOSで同じことをテストしました。実際には、同じ要素にカーソルを置いても何も強調表示されない場合にのみ、同じことが行われます。それはiOSのサファリによって追加されています。
次は、私はいくつかのCSSで遊び始めました。私の最初の考えは、それがちょうど表示上の問題かもしれないことを示していないので、私はこれを追加しました。
今のiOSに私にこれを得た
::-webkit-search-cancel-button {
height: 10px;
width: 10px;
display: inline-block;
background: blue;
}
：
だから、そこにあるが、iOSの上でいくつかの理由でその隠された、あらゆるコンテンツを得ていません。また、それをクリックしても、強制的に表示されると検索フィールドがクリアされるわけではありません。私はまだそれを使いこなしているが、今は彼らがそれを壊したようだ。意図的かどうかわかりません。当面は、CSSとJavaScriptソリューションを使用すると、より高速にしたい場所に戻ることができます。私が他のものを見つけたら、私は答えを更新します。
EDIT
これは私にナットを駆動しています。 SafariとiOSの開発者向けドキュメントをすべて検索しました。
https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/(null)-SW1
彼らはまだ上記のリンクではサポートされていますが、改訂履歴を見て、私はどんな新しいものを見つけることができない場合、それらの文書は2012年以来更新されていないとして、それを参照します。 Blarg。私ができるすべての組み合わせを試しましたが、うまく動作しません。私はその安全を想定していると思います。なぜなら、これを成し遂げることは難しいことではなく、壊したり、取り除いたり、言及するのに十分な重要性を感じないからです。私は独自のロールまたは多分バグレポートを提出し、多分私達は確かに見つけることができます言ったように、この時点で
input {
-webkit-appearance: searchfield;
}
*::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
：彼らのドキュメントには、このCSSのようなものを使用することを言います。
偉大な研究。 iOSで動作しなくなったもののリストにこれを追加することができます。 JSとCSSを使用して（クロームでこの機能を無効にする）良い選択肢になります。 – Gerben
ありがとう！本当に奇妙なことに、私がこれを取り除いて見つけることができるリンゴからの言及はまったくありません。私はまだそれを動作させることができるかどうかを確認するために、別のセットアップで遊んでいます。私は他のものを見つけたら質問を更新します。 – AtheistP3ace
それでも動作させることはできませんが、もう少し検索しましたので、私の答えを更新しました。 – AtheistP3ace