How to Add a "Search" Button in a Text Input Field

.search-container {  background-color: #FFF;  position: relative;  border-radius: 30px;  padding: 3px 50px 3px 10px;}.search-box {  background-color: transparent;  outline: none;  height: 35px;  font-size: 15px;  border: 0;  width: 100%;}.search-button {  position: absolute;  right: 4px;  top: 4px;  background-color: #C00;  border-radius: 50%;  border: 0;  color: #FFF;  width: 35px;  height: 35px;  outline: 0;}
body {  background: #CCC;}

<br /><br /><br />
<div class="search-container">  <input type="text" class="search-box" placeholder="Search For a Product..">  <button class="search-button">Go</button></div>

search box with button in textbox

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 */
}

How to add button inside input

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/

How to add a Search button?

To have a submit image button, you need to add an input of type image to your form:

<form id="search-form" name="search" action="/products" method="get">
    <input id="search-input" name="search" type="text">
    <input src="path/to/image" name="submit" type="image">
</form>

how to create a search feature without clicking the search button?

just manually trigger the click event of the button element.

$("#search-bar").keydown(function(e){
        if (e.keyCode == 13) {
                $(".btn-search").click();
        }
});

---

Related Topics