clear icon inside input text

clear icon inside input text  using -'javascript,jquery,html,css'

I'm wondering if there is a quick way to create an input text element with an icon on the right to clear the input element itself (like the google search box).

I looked around but I only found how to put an icon as background of the input element.

Is there a jQuery plugin or something else?


EDIT: I want the icon inside the input text element

something like:

|                                               X|


asked Sep 21, 2015 by shegokar.anjeet
0 votes

11 Answers

0 votes

Could I suggest, if you're okay with this being limited to html 5 compliant browsers, simply using:

JS Fiddle demo

Admittedly, in Chromium (Ubuntu 11.04), this does require there to be text inside the input element before the clear-text image/functionality will appear.


answered Sep 21, 2015 by girisha
0 votes

still depends on OS an HTML5 compliant browsers. Otherwise...

using a background image for the input:

jsBin demo

Clear icon inside input element

All you need is a class clearable:

jQuery will apply to our .clearable other CSS classes:

  background: #fff url(icoX.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */

JS / jQuery:

function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
}).on('touchstart click', '.onX', function( ev ){
    $(this).removeClass('x onX').val('').change();

The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center).
That 18px padding will prevent the text hide underneath the icon (while visible).
jQ will add the class x (if input has value) showing the clear icon.
Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX.
Clicking the onX class removes all classes, resets the input value and hides the icon.

7x7px gif: Clear icon 7x7

Base64 string:

answered Sep 21, 2015 by gauravg.gwl
0 votes

You could use a reset button styled with an image...


See it in action here:

answered Sep 21, 2015 by atulpariharmca
0 votes

I've created a clearable textbox in just CSS. It requires no javascript code to make it work

below is the demo link

answered Sep 21, 2015 by sujata naik
0 votes

Since none of the solutions flying around really met our requirements, we came up with a simple jQuery plugin called jQuery-ClearSearch -

using it is as easy as:

​ Example:

answered Sep 21, 2015 by mannumits1
0 votes

EDIT: I found this link. Hope it helps.

You have mentioned you want it on the right of the input text. So, the best way would be to create an image next to the input box. If you are looking something inside the box, you can use background image but you may not be able to write a script to clear the box.

So, insert and image and write a JavaScript code to clear the textbox.

answered Sep 21, 2015 by jekbishnoi
0 votes

Here's a jQuery plugin (and a demo at the end).

I did it mostly to illustrate an example (and a personal challenge). Although upvotes are welcome, the other answers are well handed out on time and deserve their due recognition.

Still, in my opinion, it is over-engineered bloat (unless it makes part of a UI library).

answered Sep 21, 2015 by mannumits1
0 votes

If you want it like Google, then you should know that the "X" isn't actually inside the -- they're next to each other with the outer container styled to appear like the text box.




.x-input {
    border: 1px solid #ccc;

.x-input input.x-input-text {
    border: 0;
    outline: 0;


answered Sep 21, 2015 by android_master
0 votes

Using a jquery plugin I have adapted it to my needs adding customized options and creating a new plugin. You can find it here:

An example of a simple usage:

" rel="nofollow" target="_blank">'>
" rel="nofollow" target="_blank">'>

" rel="nofollow" target="_blank">">

Not empty

Obtaining something like this:

enter image description here

answered Sep 21, 2015 by sandeep bhadauria
0 votes

jQuery Mobile now has this built in:

Jquery Mobile API TextInput docs

answered Sep 21, 2015 by thiru
0 votes

No need to include CSS or image files. No need to include that whole heavy-artillery jQuery UI library. I wrote a lightweight jQuery plugin that does the magic for you. All you need is jQuery and the plugin. =)

jQuery InputSearch sneak peek

Fiddle here: jQuery InputSearch demo.

answered Sep 21, 2015 by 20shahi