Organizational Research By

Surprising Reserch Topic

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?

thanks

EDIT: I want the icon inside the input text element

something like:

--------------------------------------------------
|                                               X|
--------------------------------------------------

    
asked Sep 21, 2015 by shegokar.anjeet
0 votes
26 views



Related Hot Questions



Government Jobs Opening

​ Example: http://jsfiddle.net/wldaunfr/FERw3/

answered Sep 21, 2015 by mannumits1
0 votes

EDIT: I found this link. Hope it helps. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

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).

http://jsfiddle.net/e4qhW/3/

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.

HTML:


    
        
        
    

CSS:

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

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

Example: http://jsfiddle.net/VTvNX/

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: https://github.com/david-dlc-cerezo/jquery-clearField

An example of a simple usage:

" rel="nofollow" target="_blank">http://code.jquery.com/jquery-1.9.1.js'>
" rel="nofollow" target="_blank">http://code.jquery.com/ui/1.10.3/jquery-ui.js'>

" rel="nofollow" target="_blank">http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">


Empty
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

...