なお、Internet Explorerでは、バージョン10から自動でクリアーボタンが表示されるようになっていますので、「X」が重複します。バージョン8、9とのデザイン統一をはかるため、バージョン10のクリアーボタンをスタイルで消しています。
input::-ms-clear { visibility:hidden; }
実装は、head内で jQueryとaddclear.jsを読み込み、次のスクリプトを追加します。
$(function(){ $("input").addClear(); });
このインプット欄になにか入力すると、クリアーボタン「X」が右側に表示されます。