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;
}
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
Css Code
Live demo link here http://jsfiddle.net/AL6vb/4/
Now change to code according your layout this is only demo .......
Fiddled:
If you're planning to reuse it with different widths, you should look up the sliding doors technique.