Clear icon inside input text

Question

Is there 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   I want the icon inside the input text element  something like   --------------------------------------------------                                                 X  --------------------------------------------------

User · Answer

I ve created a clearable textbox in just CSS  It requires no javascript code to make it work  below is the demo link  http   codepen io shidhincr pen ICLBD

User · Answer

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    lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 10 3 jquery-ui js  gt  lt  script gt   lt script src  src jquery clearField js  gt  lt  script gt   lt link rel  stylesheet  href  http   code jquery com ui 1 10 3 themes smoothness jquery-ui css  gt   lt link rel  stylesheet  href  css jquery clearField css  gt    lt table gt       lt tr gt           lt td gt  lt input name  test1  id  test1  clas  test  type  text  gt  lt  td gt           lt td gt Empty lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt input name  test2  id  test2  clas  test  type  text  value  abc  gt  lt  td gt           lt td gt Not empty lt  td gt       lt  tr gt   lt  table gt    lt script gt          test   clearField     lt  script gt    Obtaining something like this

User · Answer

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        Fiddle here  jQuery InputSearch demo

User · Answer

You can do with this commands  without Bootstrap     x000D   x000D  Array from document querySelectorAll   search-field    forEach field   gt    x000D    field querySelector  span   addEventListener  click   e   gt    x000D      field querySelector  input   value       x000D        x000D      x000D   root   x000D    --theme-color  teal  x000D    x000D   x000D   wrapper   x000D    width  80   x000D    margin  0 auto  x000D    x000D   x000D  div   x000D    position  relative  x000D    x000D   x000D  input   x000D    background none  x000D    outline none  x000D    display  inline-block  x000D    width  100   x000D    margin  8px 0  x000D    padding  13px 15px  x000D    padding-right  42 5px  x000D    border  1px solid var --theme-color   x000D    border-radius  5px  x000D    box-sizing  border-box  x000D    x000D   x000D  span   x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    margin  8px 0  x000D    padding  13px 15px  x000D    color  var --theme-color   x000D    font-weight  bold  x000D    cursor  pointer  x000D    x000D  span after   x000D    content    2716   x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  search-field  gt  x000D       lt input placeholder  Search       gt  x000D       lt span gt  lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

lt form action    method  get  gt      lt input type  text  name  search  required  required  placeholder  type here    gt      lt input type  reset  value    alt  clear    gt   lt  form gt    lt style gt     input type  text              height  38px        font-size  15pt           input type  text   invalid   input type  reset         display  none            input type  reset              background-image  url  http   png-5 findicons com files icons 1150 tango 32 edit clear png          background-position  center center        background-repeat  no-repeat        height  38px        width  38px        border  none        background-color  transparent        cursor  pointer        position  relative        top  -9px        left  -44px        lt  style gt

User · Answer

If you want it like Google  then you should know that the  X  isn t actually inside the  lt input gt  -- they re next to each other with the outer container styled to appear like the text box   HTML    lt form gt       lt span class  x-input  gt           lt input type  text  class  x-input-text    gt           lt input type  reset    gt       lt  span gt   lt  form gt    CSS    x-input       border  1px solid  ccc      x-input input x-input-text       border  0      outline  0      Example  http   jsfiddle net VTvNX

User · Answer

According to MDN   lt input type  quot search quot    gt  is currently supported in all modern browsers    x000D   x000D   lt input type  search  value  Clear this     gt  x000D   x000D   x000D    However  if you want different behavior that is consistent across browsers here are some light-weight alternatives that only require JavaScript  Option 1 - Always display the  x    example here   x000D   x000D  Array prototype forEach call document querySelectorAll   clearable-input gt  data-clear-input     function el      el addEventListener  click   function e        e target previousElementSibling value                 x000D   clearable-input     position  relative    display  inline-block     clearable-input  gt  input     padding-right  1 4em     clearable-input  gt   data-clear-input      position  absolute    top  0    right  0    font-weight  bold    font-size  1 4em    padding  0 0 2em    line-height  1em    cursor  pointer     clearable-input  gt  input  -ms-clear     display  none    x000D   lt p gt Always display the  x   lt  p gt    lt div class  clearable-input  gt     lt input type  text    gt     lt span data-clear-input gt  amp times  lt  span gt   lt  div gt    lt div class  clearable-input  gt     lt input type  text  value  Clear this     gt     lt span data-clear-input gt  amp times  lt  span gt   lt  div gt  x000D   x000D   x000D   Option 2 - Only display the  x  when hovering over the field   example here   x000D   x000D  Array prototype forEach call document querySelectorAll   clearable-input gt  data-clear-input     function el      el addEventListener  click   function e        e target previousElementSibling value                 x000D   clearable-input     position  relative    display  inline-block     clearable-input  gt  input     padding-right  1 4em     clearable-input hover  gt   data-clear-input      display  block     clearable-input  gt   data-clear-input      display  none    position  absolute    top  0    right  0    font-weight  bold    font-size  1 4em    padding  0 0 2em    line-height  1em    cursor  pointer     clearable-input  gt  input  -ms-clear     display  none    x000D   lt p gt Only display the  x  when hovering over the field  lt  p gt    lt div class  clearable-input  gt     lt input type  text    gt     lt span data-clear-input gt  amp times  lt  span gt   lt  div gt    lt div class  clearable-input  gt     lt input type  text  value  Clear this     gt     lt span data-clear-input gt  amp times  lt  span gt   lt  div gt  x000D   x000D   x000D   Option 3 - Only display the  x  if the input element has a value   example here   x000D   x000D  Array prototype forEach call document querySelectorAll   clearable-input    function el      var input   el querySelector  input       conditionallyHideClearIcon      input addEventListener  input   conditionallyHideClearIcon     el querySelector   data-clear-input    addEventListener  click   function e        input value           conditionallyHideClearIcon             function conditionallyHideClearIcon e        var target    e  amp  amp  e target     input      target nextElementSibling style display   target value    block     none           x000D   clearable-input     position  relative    display  inline-block     clearable-input  gt  input     padding-right  1 4em     clearable-input  gt  data-clear-input      display  none    position  absolute    top  0    right  0    font-weight  bold    font-size  1 4em    padding  0 0 2em    line-height  1em    cursor  pointer     clearable-input  gt  input  -ms-clear     display  none    x000D   lt p gt Only display the  x  if the  input  element has a value  lt  p gt    lt div class  clearable-input  gt     lt input type  text    gt     lt span data-clear-input gt  amp times  lt  span gt   lt  div gt    lt div class  clearable-input  gt     lt input type  text  value  Clear this     gt     lt span data-clear-input gt  amp times  lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

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    lt input class  clearable  type  text  placeholder  search  gt    lt script type  text javascript  gt          clearable   clearSearch     lt  script gt      Example  http   jsfiddle net wldaunfr FERw3

User · Answer

Add a type  quot search quot  to your input The support is pretty decent but will not work in IE lt 10  x000D   x000D   lt input type  search  gt  x000D   x000D   x000D    Older browsers If you need IE9 support here are some workarounds Using a standard  lt input type  quot text quot  gt  and some HTML elements   x000D   x000D         Clearable text inputs         clearable   each function          const  inp     this  find  input text           cle     this  find   clearable  clear        inp on  input   function         cle toggle   this value               cle on  touchstart click   function e        e preventDefault         inp val     trigger  input                 x000D     Clearable text inputs     clearable    position  relative    display  inline-block     clearable input type text     padding-right  24px    width  100     box-sizing  border-box     clearable  clear    display  none    position  absolute    right 0  top 0    padding  0 8px    font-style  normal    font-size  1 2em    user-select  none    cursor  pointer     clearable input  -ms-clear       Remove IE default X      display  none    x000D   lt span class  clearable  gt     lt input type  text  name    value    placeholder    gt     lt i class  clearable  clear  gt  amp times  lt  i gt   lt  span gt    lt script src  https   ajax googleapis com ajax libs jquery 3 5 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   Using only a  lt input class  quot clearable quot  type  quot text quot  gt   No additional elements   set a class  quot clearable quot  and play with it s background image   x000D   x000D         Clearable text inputs     function tog v  return v    addClass     removeClass       document  on  input     clearable   function          this  tog this value    x       on  mousemove     x   function  e          this  tog this offsetWidth-18  lt  e clientX-this getBoundingClientRect   left    onX       on  touchstart click     onX   function  ev        ev preventDefault          this  removeClass  x onX   val     change                clearable   trigger  input       Uncomment the line above if you pre-fill values from LS or server x000D         Clearable text inputs     clearable    background   fff url http   i stack imgur com mJotv 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     clearable  -ms-clear  display  none  width 0  height 0      Remove IE default X    x000D   lt input class  clearable  type  text  name    value    placeholder      gt    lt script src  https   ajax googleapis com ajax libs jquery 3 5 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   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   jQuery will add the class  quot x quot   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  quot x quot  area  if inside  add the class onX  Clicking the onX class removes all classes  resets the input value and hides the icon   7x7px gif   Base64 string  data image gif base64 R0lGODlhBwAHAIAAAP   5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs

User · Answer

I have written a simple component using jQuery and bootstrap  Give it a try  https   github com mahpour bootstrap-input-clear-button

User · Answer

You could use a reset button styled with an image      lt form action    method  get  gt      lt input type  text  name  search  required  required  placeholder  type here    gt      lt input type  reset  value    alt  clear    gt   lt  form gt    lt style gt     input type  text              height  38px        font-size  15pt           input type  text   invalid   input type  reset         display  none            input type  reset              background-image  url  http   png-5 findicons com files icons 1150 tango 32 edit clear png          background-position  center center        background-repeat  no-repeat        height  38px        width  38px        border  none        background-color  transparent        cursor  pointer        position  relative        top  -9px        left  -44px        lt  style gt    See it in action here  http   jsbin com uloli3 63

User · Answer

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

User · Answer

Something like this    Jsfiddle Demo       lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt  lt  title gt       lt style type  text css  gt       searchinput      display inline-block vertical-align  bottom      width 30  padding  5px padding-right 27px border 1px solid  ccc          outline  none             clearspace width  20px display  inline-block margin-left -25px     clear       width  20px      transition  max-width 0 3s overflow  hidden float  right      display  block max-width  0px      show       cursor  pointer width  20px max-width 20px    form white-space  nowrap         lt  style gt   lt  head gt   lt body gt   lt form gt   lt input type  text  class  searchinput  gt   lt  form gt   lt script src  jquery-1 11 3 min js  type  text javascript  gt  lt  script gt   lt script gt    document  ready function        input searchinput   after   lt span class  clearspace  gt  lt i class  clear  title  clear  gt  amp cross  lt  i gt  lt  span gt        input searchinput   on  keyup input  function    if    this  val         clear   addClass  show     else      clear   removeClass  show             clear   click function           input searchinput   val     focus            clear   removeClass  show             lt  script gt   lt  body gt   lt  html gt

User · Answer

jQuery Mobile now has this built in    lt input type  text  name  clear  id  clear-demo  value    data-clear-btn  true  gt    Jquery Mobile API TextInput docs

User · Answer

Could I suggest  if you re okay with this being limited to html 5 compliant browsers  simply using    lt input type  search    gt    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   Reference    Dive Into HTML 5  A form of Madness  input type search - search field  NEW  HTML5

[javascript] Clear icon inside input text

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css