search box with button in textbox

Question

i want to create a textbox that have a button inside of it just like i see in some sites, usually there is a textbox and at the right hand corner a button with a hand lens image and when the button is clicked the form is submitted. I have tried using divs to create something similar but i dont seem to get it. How is it done with css or are there some jquery magic to it ?

Answer 1

Using a wrapper

The technique you're referring to doesn't actually have the button inside the textbox normally, the border and background of the button and textbox simply blend in with a wrapper div. Here is a basic example:

jsFiddle

HTML

<div class="wrapper">
    <input type="text" />
    <button>GO</button>
</div>

CSS

.wrapper {
    border:1px solid #000;
    display:inline-block;
}

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

Using position:absolute

An alternative method is to position the button absolutely and attach it to the right. A benefit of this is that you can more easily implement the focus/active border around the text box. You can get around the text under the button issue by giving padding-right to the text box.

jsFiddle

.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;
}

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

button {
    position:absolute;
    right:0;
    top:0;
}

input {
    padding-right:30px; /* button padding */
}

Answer 2

This is not necessarily how you would best do it. However, here is what you asked for. Check out this jsFiddle. Make button position:absolute;

http://jsfiddle.net/j8bbj/

<input type="text" />
<button>si</button>



input[type="text"]
{
    width:200px;
    height:40px;
}

button
{
    position:absolute;
    left:165px;
    top:10px;    
}