I'm working on a search form for a tumblr theme. I'm wondering if there's any simple JavaScript, CSS, or jQuery solution that when a little tiny "x" image inside the textbox is clicked, it clears the form? An example of this is on apple.com. Here's the search code I'm working with:
<form id="search" action="/search">
<p>
<input type="text" name="q" placeholder="Search…" />
</p>
</form>
It is not INSIDE actually...
Try this:
<span class="search"><img src=lookup><input type=text ><span>x</span></span>
with the style:
span.search
{
display:inline-block;
border:1px solid black;
border-radius:0.5em;
-webkit-border-radius: 0.5em;
}
span.search > input
{
background: none;
border: none;
}
To expand on kingjv's solution, this is a simple plugin:
http://jsfiddle.net/PvFSF/
(function ($, undefined) {
$.fn.clearable = function () {
var $this = this;
$this.wrap('<div class="clear-holder" />');
var helper = $('<span class="clear-helper">x</span>');
$this.parent().append(helper);
helper.click(function(){
$this.val("");
});
};
})(jQuery);
$("#myInput").clearable();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With