コニファ・ロゴ

csstest:jQueryプラグイン addclear.jsを使って、検索窓にクリアーボタンを追加

Yahooなどの検索窓にキーワードを入力すると、クリアーボタンが表示されます。jQueryプラグイン addclear.jsを使うと、それと同じものを実装してくれます。もちろん、検索に限らず、他の入力用途にも使えます。

なお、Internet Explorerでは、バージョン10から自動でクリアーボタンが表示されるようになっていますので、「X」が重複します。バージョン8、9とのデザイン統一をはかるため、バージョン10のクリアーボタンをスタイルで消しています。

  input::-ms-clear {
	visibility:hidden;
	}

実装は、head内で jQueryとaddclear.jsを読み込み、次のスクリプトを追加します。

  $(function(){
	$("input").addClear();
	});

クリアーボタン実装サンプル

 

戻るボタン