All geek questions in one place

Put the button in the text box

I am trying to create a form using a button inside a text box. I want this button to be in 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 that the Go button is under the text box. What to do to put it in a text box? enter image description here

I want the "Go" button to be in the text box.

+5
source share
8 answers

 .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>
+5
source

Please try this.

 <!DOCTYPE html> <html> <head> <style> .input-container{ width: 250px; border: 1px solid #a9a9a9; float: left; } .input-container input:focus, .input-container input:active { outline: none; } .input-container input { width: 80%; float: left; border: none; } .input-container button { float: right; } </style> </head> <body> <div class="input-container"> <input type="text" class="input-field"/> <button class="input-button">Ok</button> </div> </body> </html>
+4
source

You need to press position: absolute; on the button and place 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>
+1
source

You can use position: absolute function 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;}
+1
source

What you need to do is both the input field and the button in one container, you set that the container should be located relatively, and you set the button that will be installed absolutely. It is important that the container is positioned relatively, so that the button remains within the input field.

Same:

 .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>
+1
source

for easy use of this method,

Set a fixed width for both the text field and the button .. for example, the text width is 200px , the button will be 40px and add margin-left:-40px (depending on your needs), so it will be set between 160-200px text input fields.

  .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>
+1
source

Twitter Bootstrap makes something like this very easy. They call it Input Group . If you want to do the same without any Bootstrap'ness loading, try this script .

Here is the markup

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

and related 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; }
+1
source

All of the above answers are correct. But there is a very simple way to achieve this. It looks like this:

 <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 is a trick. No need to write additional css properties. Thank you all for your answers.

0
source

Source: https://habr.com/ru/post/1259492/

More articles:


All Articles