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

Question

Please answer the following questions:

• How to combine the search box and the search button, as shown below in examples 1 and example 2? Box and button connected together.
• How to put the magnifying glass icon on the left side of the search box?
• How to put the default text in the "Search for items" field and extinguish it when the user clicks on this field.

Example 1

Example2

Example 3 (I do not want a separate button, as shown below)

Please, help! Thank!!

Answer 1

The easiest way is to make the entire shell of the text field, from the icon on the left to the button on the right, one div, one image.

30px;

div , , .

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

.

- :

HTML:

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

CSS

input,
button {
    float: left;
}

Fiddle

, , , .

, .

.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

, .

, flexbox. .

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

input {
    flex-grow: 2;
}

Fiddle

( ), .

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

::before -, , , .

( ) placeholder. , JavaScript polyfill .

Answer 3

CSS... - :

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

, :

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

Src: Google.

Answer 4

, , . CSS. , , . - , .

Answer 5

. :
, . input . css .

position:relative;
top:-{height of your text box}px;

.

Answer 6

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

#search_wrapper{
    background-color:white;
    position:relative;
    border: 1px solid black;
    width:400px;
}

#search_field {    
    background-transparent;
    border-style: none;
    width: 350px;
}

#search_button {
    position:absolute;
    display: inline;
    border: 1px solid black; 
    text-align: center;
    top:0;
    right:0;
    width:50px;
}

http://jsfiddle.net/zxcrmyyt/