Question

Possible Duplicate:
Stop chrome from auto styling input type=search

I want to add that little “X” that many search input boxes use for clearing the info, but I need to keep my own input background, font size etc. Any suggestions what to do?

input type"search"

changes the layout entirely…

Answer 1

You can try to use a regular text box with an image that has been moved on top of it so it won’t mess with its background-image.

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();
  });
});

You can see it in action here: http://jsbin.com/afafet