Setting an Input Box Background - css

Question

I have to create an input box with the following background
So far in my code I have the code below and its not showing -> What would be the correct procedure to do this?
I also have a couple of variations of this button I have to produce and they are the following:
A cross on the dark area of the button - I was just going to use a <span> tag with a class and set the graphic to that -> Would this be a good way to go?
A paper clip icon just after the curve on the left -> I was going to do the same as above -> Would this be a good way to go?
HTML:
<div class="innerTo">
<form action="#" method="get">
<label for="recipients">TO: </label>
<input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
</form>
</div>
CSS:
.innerBar .innerTo{
width:200px;
padding:5px 0 0 15px;
display:block;
float:left;
}
.innerBar .innerTo label{
margin:0 15px 0 0;
font-size:14px;
font-weight:bold;
color:#666666;
}
.innerBar .innerTo input[type=search] {
color: red;
}
.innerBar .recipients{
background-image:url('../images/searchBGpng.png') no-repeat;
width:192px;
height:27px;
}

Answer 1

Fiddled:
<div class="input-container">
<input type="text" value="aaaaaaaaaaaaaaaaaa"/>
</div>
.input-container {
background: url(http://i.stack.imgur.com/0Vlc5.png) no-repeat;
width:197px;
height:28px;
}
.input-container input{
height:28px;
line-height:28px;/*results in nice text vertical alignment*/
border:none;
background:transparent;
padding:0 10px;/*don't start input text directly from the edge*/
width:148px;/*full width - grey on the side - 2*10px padding*/
}
If you're planning to reuse it with different widths, you should look up the sliding doors technique.

Answer 2

I have created new code for your form if you like this, then go ahead and apply it to your html code
You can do this
HTML Code
<form action="#" method="get">
<label for="recipients">TO: </label>
<input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
<input type="submit" value="">
</form>
Css Code
label{
float:left;
margin:25px 0 0 0px;
padding:0;
}
input[type="search"], input[type="submit"]{
margin:20px 0 0 0px;
padding:0;
line-height:28px;
height:28px;
background: url("http://i.stack.imgur.com/0Vlc5.png") no-repeat 0 0;
border: 0 none;
float:left;
}
input[type="search"]{
width:152px;
padding-left:15px;
}
input[type="submit"]{
background-position:-167px 0;
width: 30px;
cursor:pointer;
}
Live demo link here http://jsfiddle.net/AL6vb/4/
Now change to code according your layout this is only demo .......