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

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!

---

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/

---

You should try :

background-image : url(path/to/your/image/relative/to/css/file) no-repeat;
background-position : right;

You don't need

<input type="image"/> <!-- this can be used to replace a submit control
                           for example, but not what you need I think -->

You should also consider using a more specific CSS rule (to prevent styling other inputs)

#header-search input[type="text"]

---

The best I could come up with is the following, which is a tad more complex than I'd like:

#header-search, button {
    display: inline-block;
    vertical-align: baseline;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:30px;
    padding:4px;
    color:#4a4a4a;
    margin: 0;
    float: left;
}
#header-search {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    border-right-width: 0;
}
button {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    border-left-width: 0;
}

And involves amending the mark-up (and adding a button type="submit" to contain the magnifying glass image, sigh...):

<input type="search" id="header-search" />
<button type="submit">
    <img src="http://davidrhysthomas.co.uk/linked/search.png" />
</button>

JS Fiddle demo.

Note: please be aware that I, for some reason currently unknown to me, used the id of #header-search on the input itself, rather than the parent element. So your selector will need to be amended from the one I used in the above example.

---

Edited because it looked wrong, with the outline, on focus, following the rectangle of the search input (check the original JS Fiddle demo). So, I replaced the outline with a border colour-change, to make it look a little more 'natural':

#header-search:focus {
    border-color: #f90;
    border-right-width: 0;
}

#header-search:focus + button[type=submit] {
    border-color: #f90;
    border-left-width: 0;
}

Revised JS Fiddle demo.