Doing a input type=“text” with CSS3 and fixed image on the background

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 in

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

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/