input type = search - 如何获取“x”但保留原始输入布局

时间:2012-07-19 16:37:15

标签: jquery html css

  

可能重复:
  Stop chrome from auto styling input type=search

我想添加许多搜索输入框用于清除信息的小“X”,但我需要保留自己的输入背景,字体大小等。有什么建议吗?

input type"search"

完全改变布局......

1 个答案:

答案 0 :(得分:0)

您可以尝试使用常规文本框,其中包含已在其上移动的图像,这样就不会弄乱其背景图像。

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