Put a button inside the text box

Question

I'm trying to design a form, with a button inside a text-box. I want that button to be inside the text-box. This is how I tried:

<div class="row">
    <div class="col-sm-6">
        <div class="form-group required">
            <label for="PickList_Options" class="col-sm-4 control-label">Options</label>
            <div class="col-sm-4 buttonwrapper">
                <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
                <button>GO</button>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="result" id="mydiv"></div>
    </div>
</div>

my css:

.buttonwrapper {
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

But, the problem is, the Go button is placed below the text-box. What should I do to place it inside the text-box?

I want that "Go" button to be inside the text-box.

Absolute positioning is probably the best option here. (That is, if you really want to place the button _over_ the input field, in which case you will have to apply additional measures to keep it from obscuring text under it. The actual _best_ option would maybe rather be to simply have two elements next to each other, and put the rounded border around those two.) — CBroe, Nov 09 '16 at 09:05
Possible duplicate of [How do I put a clear button inside my HTML text input box like the iPhone does?](http://stackoverflow.com/questions/2803532/how-do-i-put-a-clear-button-inside-my-html-text-input-box-like-the-iphone-does) — Deepak Yadav, Nov 09 '16 at 09:10

Nitheesh · Answer 1 · 2019-12-13T08:43:54.427

Please try this. Remove the outline for the input in active and focus state, and add a border for the input container.

Edit: Im adding the flex-box implementation as well.

Display inline-block implementation

.input-container{
    width: 250px;
    border: 1px solid #a9a9a9;
    display: inline-block;
}
.input-container input:focus, .input-container input:active {
    outline: none;
}
.input-container input {
    width: 80%;
    border: none;
}

.input-container button {
    float: right;
}

<div class="input-container">
    <input type="text" class="input-field"/>
    <button class="input-button">Ok</button>
</div>

Display flex implementation

.input-container {
    display: flex;
    width: 250px;
    border: 1px solid #a9a9a9;
    justify-content: space-between;
}
.input-container input:focus, .input-container input:active {
    outline: none;
}
.input-container input {
    border: none;
}

<div class="input-container">
    <input type="text" class="input-field"/>
    <button class="input-button">Ok</button>
</div>

score 7 · Accepted Answer · answered Nov 09 '16 at 09:12

.buttonwrapper {
  display: inline-block;
}

input{
  background-color: transparent;
  border: 2px solid black;
}

button {
  margin-left: -50%;
  border: none;
  background-color: transparent;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4 buttonwrapper">
        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
        <button>GO</button>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div>
  </div>
</div>

score 1 · Answer 3 · answered Nov 09 '16 at 09:07

You need give position: absolute; to the button & position it inside using top. Add these styles to your button

button {
  position: absolute;
  top: 6px;
}

Codepen

.buttonwrapper {
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
  position: absolute;
  top: 6px;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4 buttonwrapper">
        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
        <button>GO</button>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div> 
  </div>
</div>

score 1 · Answer 4 · answered Nov 09 '16 at 09:15

You can use position:absolute feature here,

HTML

<div class="row">
                            <div class="col-sm-6">
                                <div class="form-group required">
                                    <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

                                    <div class="col-sm-4 buttonwrapper">
                                    <div class="button-container">
                                        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
                                        <button>GO</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="result" id="mydiv"></div>
                            </div>
                        </div>

CSS

.button-container button {  line-height: 28px;  position: absolute;  right: 0;  top: 0;}
.button-container {position:relative;}
.button-container input {padding-right:40px;}

score 1 · Answer 5 · answered Nov 09 '16 at 09:18

What you need to do is put both the input field and the button in one container, you set that container to be positioned relatively and you set the button to be positioned absolutely. It's important that the container is positioned relatively, so to make sure the button stays within the input field.

Like so:

.buttonwrapper {
    display:inline-block;
    position: relative;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
  position: absolute;
  /* Adjust these two to your liking */
  top: 6px;
  right: 3px;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4">
          <div class="buttonwrapper">
             <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
             <button>GO</button>
          </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div> 
  </div>
</div>

score 1 · Answer 6 · answered Nov 09 '16 at 09:31

for Simple purpose use this method,

Set fixed width for both text box and button.. for eg: text width is 200px, button will be 40px and add margin-left:-40px(based on your need) so it will be fixed between 160-200px of input text box..

    .buttonwrapper {
            display:inline-block;
        }

        input,
        button {
            background-color:transparent;
            border:1 solid black;
        }

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group required">
                <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

        

<div class="col-sm-4 buttonwrapper">
            <input type="text" style="width:200px" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
            <button style="width:40px;margin-left: -43px">GO</button>
        </div>
    </div>
</div>
<div class="col-sm-6">
    <div class="result" id="mydiv"></div>
</div>
</div>

score 1 · Answer 7 · answered Nov 09 '16 at 09:37

Twitter Bootstrap does something like this very easily. They call it the Input Group. If you are looking to do the same without the whole Bootstrap'ness, try this fiddle.

Here's the markup

<span>
  <input type="text" value="Some text">
  <button onclick="alert('Hello!');">Click</button>
</span>

and the associated CSS

span {
  border: 1px solid red;
  padding: 2px;
  font-size: 0px;
  display: inline-block;
  background: white;
}

input,
button {
  display: inline-block;
  margin: 0px;
  font-size: 12px;
  background: white;
  border-style: none;
}

score 0 · Answer 8 · answered Nov 09 '16 at 09:35

All the above answers are correct. But, there is a very simple way to achieve it. That is as follows:

<div class="col-sm-6">
                                <div class="form-group required">
                                    <label for="PickList_Options" class="col-sm-4 control-label">Options</label>
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                          <input type="text" class="form-control">
                                          <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">Add</button>
                                          </span>
                                        </div>
                                    </div>                                  
                                </div>
                            </div>

This does the trick. No need to write extra css properties. Thank you all for your answers.

score 0 · Answer 9 · answered May 30 '19 at 09:25

.buttonwrapper {
  display: inline-block;
}

input{
  background-color: transparent;
  border: 2px solid black;
}

button {
  margin-left: 200px;
  border: none;
  background-color: transparent;
}

<div class="row">
  <div class="col-sm-6">
    <div class="form-group required">
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label>

      <div class="col-sm-4 buttonwrapper">
        <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' />
        <button>GO</button>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="result" id="mydiv"></div>
  </div>
</div>

Try to give a small description about your answer , refer https://stackoverflow.com/help/how-to-answer — Angel F Syrus, May 30 '19 at 10:03

Put a button inside the text box

9 Answers9

Related