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 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"]

Answer 2

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.

Answer 3

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/