How to merge HTML input box and a button? (sample images attached)

Question

Please answer the following questions:

1. How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
2. How to put 'magnifier' icon on the left side of the search box?
3. How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.

Example1

Example2

Example3 (I don't want a separate button as shown below)

Please help! Thanks!!

Answer 1

Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.

Then put a textfield inside that wrapper with a margin-left of like 30px;

Then put a div inside the wrapper positioned to the right and add a click listener to it.

HTML:

<div id="search_wrapper">
    <input type="text" id="search_field" name="search" value="Search items..." />
    <div id="search_button"></div>
</div>

CSS:

#search_wrapper{
    background-image:url('/path/to/your/sprite.gif');
    width:400px;
    height:40px;
    position:relative;
}

#search_field {
    margin-left:40px;
    background-transparent;
    height:40px;
    width:250px;
}

#search_button {
    position:absolute;
    top:0;
    right:0;
    width:80px;
    height:40px;
}

JQuery:

$(function(){

    // Click to submit search form
    $('#search_button').click(function(){
        //submit form here
    });

    // Fade out default text 
    $('#search_field').focus(function(){
        if($(this).val() == 'Search items...')
        {
            $(this).animate({
                opacity:0
            },200,function(){
                $(this).val('').css('opacity',1);
            });
        }
    });
});

Answer 2

For your first question, there are many ways to accomplish the joining of the button to the search box.

The easiest is to simply float both elements to the left:

HTML:

<div class="wrapper">
    <input placeholder="Search items..."/>
    <button>Search</button>
</div>

CSS:

input,
button {
    float: left;
}

Fiddle

This method has some limitations, however, such as if you want the search box to have a percentage-based width.

In those cases, we can overlay the button onto the search box using absolute positioning.

.wrapper {
    position: relative;
    width: 75%;
}

input {
    float: left;
    box-sizing: border-box;
    padding-right: 80px;
    width: 100%;
}

button {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
}

Fiddle

The limitation here is that the button has to be a specific width.

Probably the best solution is to use the new flexbox model. But you may have some browser support issues.

.wrapper {
    display: flex;
    width: 75%;
}

input {
    flex-grow: 2;
}

Fiddle

For your second question (adding the magnifier icon), I would just add it as a background image on the search box.

input {
    padding-left: 30px;
    background: url(magnifier.png) 5px 50% no-repeat;
}

You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.

For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.

Answer 3

It's all in the CSS... You want something like this:

http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box

Also, for the search icon:

http://zenverse.net/create-a-fancy-search-box-using-css/

Src: Quick Google.