jquery - input type=search - 「x」を取得するが、元の入力レイアウトを維持する方法

Question

重複の可能性：
オートスタイリング入力タイプ=検索からクロムを停止

多くの検索入力ボックスが情報を消去するために使用する小さな「X」を追加したいのですが、独自の入力背景、フォント サイズなどを保持する必要があります。

input type"search"

レイアウトを完全に変更します...

Answer 1

背景画像を台無しにしないように、その上に画像を移動した通常のテキスト ボックスを使用することができます。

HTML

<div class="clearable">
  <input type="text"/>
  <img src="http://www.hanebutt.co.uk/uploads/content/close_x.gif" />
</div>

CSS

 .clearable img {position: relative; left: -20px;}

jQuery

$(document).ready(function() {
  $('.clearable img').click(function() {
    var theInput = $(this).parent().find('input');
    theInput.val("");
    theInput.focus();
  });
});

ここで実際の動作を確認できます: http://jsbin.com/afafet