How do I put a clear button inside my HTML text input box like the iPhone does

Question

I want to have a nice little icon that  when clicked will clear the text in the  lt INPUT gt  box   This is to save space rather than having a clear link outside of the input box   My CSS skills are weak      Here is a screenshot photo of how the iPhone looks

User · Answer

HTML5 introduces the  search  input type that I believe does what you want    lt input type  search    gt   Here s a live example

User · Answer

Of course the best approach is to use the ever-more-supported  lt input type  quot search quot    gt   Anyway for a bit of coding fun I thought that it could be achieved also using the form s reset button  and this is the working result  it is worth noting that you cannot have other inputs in the form but the search field with this approach  or the reset button will erase them too   no javascript needed   x000D   x000D  form      position  relative      width  200px     form input       width  100       padding-right  20px      box-sizing  border-box     form input placeholder-shown   button    opacity  0    pointer-events  none      form button       position  absolute      border  none      display  block      width  15px      height  15px      line-height  16px      font-size  12px      border-radius  50       top  0      bottom  0      right  5px      margin  auto      background   ddd      padding  0      outline  none      cursor  pointer      transition   1s    x000D   lt form gt           lt input type  text  placeholder       gt           lt button type  reset  gt  amp times  lt  button gt   lt  form gt  x000D   x000D   x000D

User · Answer

Maybe this simple solution can help    x000D   x000D   lt input type  text  id  myInput  value  No War   gt  lt button onclick  document getElementById  myInput   value       title  Clear  gt X lt  button gt  lt  input gt  x000D   x000D   x000D

User · Answer

Mahmoud Ali Kaseem  I have just changed some CSS to make it look different and added focus     https   jsfiddle net xn9eogmx 81    x000D   x000D      clear   click function     x000D        input-outer input   val      x000D        input-outer input   focus    x000D      x000D  body   x000D    font-family   Arial   x000D    font-size  14px  x000D    x000D   input-outer   x000D    height  2em  x000D    width  15em  x000D    border  1px  777 solid  x000D    position  relative  x000D    padding  0px  x000D    border-radius  4px  x000D    x000D   input-outer input   x000D    height  100   x000D    width  100   x000D    border  0px  x000D    outline  none  x000D    margin  0 0 0 0px  x000D    color   666  x000D    box-sizing  border-box  x000D    padding  5px  x000D    padding-right  35px  x000D    border-radius  4px  x000D    x000D   clear   x000D    position  absolute  x000D    float  right  x000D    height  2em  x000D    width  2em  x000D    top  0px  x000D    right  0px  x000D    background   aaa  x000D    color  white  x000D    text-align  center  x000D    cursor  pointer  x000D    border-radius  0px 4px 4px 0px  x000D    x000D   clear after   x000D    content    274c   x000D    position  absolute  x000D    top  4px  x000D    right  7px  x000D    x000D   clear hover  x000D   clear focus   x000D    background   888  x000D    x000D   clear active   x000D    background   666  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  input-outer  gt  x000D     lt input type  text  gt  x000D     lt div id  clear  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I got a creative solution I think you are looking for  x000D   x000D      clear   click function     x000D        input-outer input   val      x000D      x000D  body   x000D    font-family   Tahoma   x000D    x000D   input-outer   x000D    height  2em  x000D    width  15em  x000D    border  1px  e7e7e7 solid  x000D    border-radius  20px  x000D    x000D   input-outer input   x000D    height  2em  x000D    width  80   x000D    border  0px  x000D    outline  none  x000D    margin  0 0 0 10px  x000D    border-radius  20px  x000D    color   666  x000D    x000D   clear   x000D    position  relative  x000D    float  right  x000D    height  20px  x000D    width  20px  x000D    top  5px  x000D    right  5px  x000D    border-radius  20px  x000D    background   f1f1f1  x000D    color  white  x000D    font-weight  bold  x000D    text-align  center  x000D    cursor  pointer  x000D    x000D   clear hover   x000D    background   ccc  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  input-outer  gt  x000D     lt input type  text  gt  x000D     lt div id  clear  gt  x000D      X x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    https   jsfiddle net qdesign xn9eogmx 1

User · Answer

It is so simple in HTML5  lt input type  quot search quot  gt   This will do your job

User · Answer

thebluefox has summarized the most of all  You re only also forced to use JavaScript to make that button to work anyway  Here s an SSCCE  you can copy n paste n run it   x000D   x000D   lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt title gt SO question 2803532 lt  title gt           lt script src  http   code jquery com jquery-latest min js  gt  lt  script gt           lt script gt                document  ready function                        input deletable   wrap   lt span class  deleteicon    gt    after     lt span  gt    click function                           this  prev  input   val     trigger  change   focus                                                  lt  script gt           lt style gt              span deleteicon                   position  relative                            span deleteicon span                   position  absolute                  display  block                  top  5px                  right  0px                  width  16px                  height  16px                  background  url  http   cdn sstatic net stackoverflow img sprites png v 4   0 -690px                  cursor  pointer                            span deleteicon input                   padding-right  16px                  box-sizing  border-box                         lt  style gt       lt  head gt       lt body gt           lt input type  text  class  deletable  gt       lt  body gt   lt  html gt  x000D   x000D   x000D   Source  jQuery is by the way not necessary  it just nicely separates the logic needed for progressive enhancement from the source  you can of course also go ahead with plain HTML CSS JS   x000D   x000D   lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt title gt SO question 2803532  with  plain  HTML CSS JS lt  title gt           lt style gt              span deleteicon                   position  relative                            span deleteicon span                   position  absolute                  display  block                  top  5px                  right  0px                  width  16px                  height  16px                  background  url  http   cdn sstatic net stackoverflow img sprites png v 4   0 -690px                  cursor  pointer                            span deleteicon input                   padding-right  16px                  box-sizing  border-box                         lt  style gt       lt  head gt       lt body gt           lt span class  deleteicon  gt               lt input type  text  gt               lt span onclick  var input   this previousSibling  input value       input focus     gt  lt  span gt           lt  span gt       lt  body gt   lt  html gt  x000D   x000D   x000D   You only ends up with uglier HTML  and non-crossbrowser compatible JS       Note that when the UI look n feel isn t your biggest concern  but the functionality is  then just use  lt input type  quot search quot  gt  instead of  lt input type  quot text quot  gt   It ll show the  browser-specific  clear button on HTML5 capable browsers

User · Answer

You can t actually put it inside the text box unfortunately  only make it look like its inside it  which unfortunately means some css is needed  P  Theory is wrap the input in a div  take all the borders and backgrounds off the input  then style the div up to look like the box  Then  drop in your button after the input box in the code and the jobs a good un   Once you ve got it to work anyway

User · Answer

Nowadays with HTML5  it s pretty simple    lt input type  search  placeholder  Search      gt    Most modern browsers will automatically render a usable clear button in the field by default      If you use Bootstrap  you ll have to add an override to your css file to make it show   input type search   -webkit-search-cancel-button       -webkit-appearance  searchfield-cancel-button        Safari WebKit browsers can also provide extra features when using type  search   like results 5 and autosave        but they also override many of your styles  e g  height  borders     To prevent those overrides  while still retaining functionality like the X button  you can add this to your css   input type search        -webkit-appearance  none      See css-tricks com for more info  about the features provided by type  search

User · Answer

Firefox doesn t seem to support the clear search field functionality    I found this pure CSS solution that works nicely  Textbox with a clear button completely in CSS   Codepen   2013  The magic happens at  search-box not  valid     close-icon       display  none      x000D   x000D  body       background-color   f1f1f1      font-family  Helvetica Arial Verdana     h2       color  green      text-align  center     redfamily       color  red      search-box  close-icon  search-wrapper       position  relative      padding  10px     search-wrapper       width  500px      margin  auto     search-box       width  80       border  1px solid  ccc    outline  0    border-radius  15px     search-box focus       box-shadow  0 0 15px 5px  b0e0ee      border  2px solid  bebede     close-icon       border 1px solid transparent      background-color  transparent      display  inline-block      vertical-align  middle    outline  0    cursor  pointer     close-icon after       content   X       display  block      width  15px      height  15px      position  absolute      background-color   FA9595      z-index 1      right  35px      top  0      bottom  0      margin  auto      padding  2px      border-radius  50       text-align  center      color  white      font-weight  normal      font-size  12px      box-shadow  0 0 2px  E50F0F      cursor  pointer     search-box not  valid     close-icon       display  none    x000D   lt h2 gt      Textbox with a clear button completely in CSS  lt br gt   lt span class  redfamily  gt  lt  0 lines of JavaScript  gt  lt  span gt   lt  h2 gt   lt div class  search-wrapper  gt       lt form gt       lt input type  text  name  focus  required class  search-box  placeholder  Enter search term    gt           lt button class  close-icon  type  reset  gt  lt  button gt       lt  form gt   lt  div gt  x000D   x000D   x000D   I needed more functionality and added this jQuery in my code      close-icon   click function       my code

User · Answer

Check out our jQuery-ClearSearch plugin  It s a configurable jQuery plugin - adapting it to your needs by styling the input field is straightforward  Just use it as follows    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

[javascript] How do I put a clear button inside my HTML text input box like the iPhone does?

Examples related to javascript

Examples related to iphone

Examples related to html

Examples related to css