Put a button inside the text box - html

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.

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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;}

Answer 5

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>

Answer 6

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>

Answer 7

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;
}

Answer 8

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.

Answer 9

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