入力テキスト要素にクリアアイコンを簡単に追加するにはどうすればよいですか?

クリア アイコンを使用した入力テキスト要素の作成

ユーザー インターフェイスを設計する場合、多くの場合、ユーザーが入力をクリアする方法を提供する必要があります。フィールド。 Google 検索ボックスは、input 要素内に「X」アイコンを配置することで、シンプルかつ効果的なソリューションを提供します。この機能を実現するのは難しいように思えるかもしれませんが、簡単な解決策が存在します。

入力テキスト要素内にアイコンを追加する

透明なアイコンを持つ入力テキスト要素を作成するには、 「type="search"」属性を input 要素に追加するだけです。これにより、入力フィールドの右側に「X」アイコンが自動的に表示されます。

例:

ブラウザのサポート

この機能のサポートは一般的に良好です。ただし、Internet Explorer のバージョン 10 未満では動作しない可能性があることに注意してください。

以上が入力テキスト要素にクリアアイコンを簡単に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。