Question

I am developing my first HTML5 / CSS3 website and I want to do all I can correctly and with well methods and being usable too.

I have to reproduce the next search input in this website:

What I don’t know how to do it is to implement the background of the image, or if the image needs to be a <input type="image" />.

At the moment, what I’ve is the next:

#header-search input {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:16px;
    padding:4px;
    color:#4a4a4a
}

This creates an input with the same radius and all the area is input text. There is no space for the magnifying glass and if it was a background the image can not be clicked. In this point, what is best? Let the input only triggered by or… how will you do it?

Anyway you will do it, please tell me.

Thank you in advance!

Answer 1

You can use a submit button with a background-image and position it over the searchbox.

Do not forget to add padding to the right of your input box to allow for the button without overlap. (i have also added a class to your search box so the rules do not target the same elements)

Html

<form id="header-search">
    <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>

Css

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

the end result is

demo http://jsfiddle.net/gaby/F5Nmp/1/