How to add button inside input

Question

I am trying to achieve this   I just want to show a button inside an input element just like the above image

User · Answer

Use a Flexbox  and put the border on the form   The best way to do this now  2019  is with a flexbox     Put the border on the containing element  in this case I ve used the form  but you could use a div   Use a flexbox layout to arrange the input and the button side by side  Allow the input to stretch to take up all available space  Now hide the input by removing its border     Run the snippet below to see what you get    x000D   x000D  form   x000D       This bit sets up the horizontal layout    x000D    display flex  x000D    flex-direction row  x000D     x000D       This bit draws the box around it    x000D    border 1px solid grey  x000D   x000D       I ve used padding so you can see the edges of the elements     x000D    padding 2px  x000D    x000D   x000D  input   x000D       Tell the input to use all the available space    x000D    flex-grow 2  x000D       And hide the input s outline  so the form looks like the outline    x000D    border none  x000D    x000D   x000D  input focus   x000D       removing the input focus blue box  Put this on the form if you like     x000D    outline  none  x000D    x000D   x000D  button   x000D       Just a little styling to make it pretty    x000D    border 1px solid blue  x000D    background blue  x000D    color white  x000D    x000D   lt form gt  x000D     lt input   gt  x000D     lt button gt Go lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    Why this is good   It will stretch to any width   The button will always be just as big as it needs to be  It won t stretch if the screen is wide  or shrink if the screen is narrow  The input text will not go behind the button    Caveats and Browser Support  There s limited Flexbox support in IE9  so the button will not be on the right of the form  IE9 has not been supported by Microsoft for some years now  so I m personally quite comfortable with this   I ve used minimal styling here  I ve left in the padding to show the edges of things  You can obviously make this look however you want it to look with rounded corners  drop shadows  etc

User · Answer

x000D   x000D   flexContainer   x000D      display  flex  x000D    x000D   x000D   inputField   x000D      flex  1  x000D    x000D   lt div class  flexContainer  gt  x000D       lt input type  password  class  inputField  gt  x000D       lt button type  submit  gt  lt img src  arrow png  alt  Arrow Icon  gt  lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is the cleanest way to do in bootstrap v3    lt div class  form-group  gt       lt div class  input-group  gt           lt input type  text  name  search  class  form-control  placeholder  Search  gt           lt span gt  lt button type  submit  class  btn btn-primary  gt  lt i class  fa fa-search  gt  lt  i gt  lt  button gt  lt  span gt        lt  div gt   lt  div gt

User · Answer

I found a great code for you   HTML   lt form class  form-wrapper cf  gt       lt input type  text  placeholder  Search here     required gt       lt button type  submit  gt Search lt  button gt   lt  form gt    CSS    Clearing Floats    cf before   cf after       content         display table      cf after       clear both      cf       zoom 1           Form wrapper styling     form-wrapper       width  450px      padding  15px      margin  150px auto 50px auto      background   444      background  rgba 0 0 0  2       border-radius  10px      box-shadow  0 1px 1px rgba 0 0 0  4  inset  0 1px 0 rgba 255 255 255  2         Form text input      form-wrapper input       width  330px      height  20px      padding  10px 5px      float  left         font  bold 15px  lucida sans    trebuchet MS    Tahoma       border  0      background   eee      border-radius  3px 0 0 3px           form-wrapper input focus       outline  0      background   fff      box-shadow  0 0 2px rgba 0 0 0  8  inset      form-wrapper input  -webkit-input-placeholder      color   999     font-weight  normal     font-style  italic      form-wrapper input -moz-placeholder       color   999      font-weight  normal      font-style  italic      form-wrapper input -ms-input-placeholder       color   999      font-weight  normal      font-style  italic           Form submit button     form-wrapper button       overflow  visible      position  relative      float  right      border  0      padding  0      cursor  pointer      height  40px      width  110px      font  bold 15px 40px  lucida sans    trebuchet MS    Tahoma       color   fff      text-transform  uppercase      background   d83c3c      border-radius  0 3px 3px 0           text-shadow  0 -1px 0 rgba 0  0  0   3         form-wrapper button hover           background   e54040        form-wrapper button active   form-wrapper button focus         background   c42f2f      outline  0        form-wrapper button before      left arrow        content          position  absolute      border-width  8px 8px 8px 0      border-style  solid solid solid none      border-color  transparent  d83c3c transparent      top  12px      left  -6px      form-wrapper button hover before       border-right-color   e54040      form-wrapper button focus before   form-wrapper button active before           border-right-color   c42f2f           form-wrapper button  -moz-focus-inner      remove extra button spacing for Mozilla Firefox        border  0      padding  0          Demo  On fiddle Source  Speckyboy

User · Answer

You can use CSS background url ur img png  for insert image inside input box  but for create click event you need to merge your arrow image and input box

User · Answer

The button isn t inside the input  Here   input type  text         width  200px      height  20px      padding-right  50px     input type  submit         margin-left  -50px      height  20px      width  50px      Example  http   jsfiddle net s5GVh

User · Answer

This can be achieved using inline-block  JS fiddle here   lt html gt   lt body class  body  gt       lt div class  form  gt           lt form class  email-form  gt               lt input type  text  class  input  gt               lt a href     class  button  gt Button lt  a gt           lt  form gt       lt  div gt   lt  body gt   lt  html gt     lt style gt          box-sizing  border-box      body       font-family  Arial  sans-serif      font-size  14px      line-height  20px      color   333      form       display  block      margin  0 0 15px      email-form       display  block      margin-top  20px      margin-left  20px      button       height  40px      display  inline-block      padding  9px 15px      background-color  grey      color  white      border  0      line-height  inherit      text-decoration  none      cursor  pointer      input       display  inline-block      width  200px      height  40px      margin-bottom  0px      padding  9px 12px      color   333333      vertical-align  middle      background-color   ffffff      border  1px solid  cccccc      margin  0      line-height  1 42857143     lt  style gt

[html] How to add button inside input

Use a Flexbox, and put the border on the form.

Why this is good

Caveats and Browser Support

Examples related to html

Examples related to css

Examples related to html-input