Background Images into Form Fields with CSS

Adding some expressive background images to your HTML form can be considered sometimes as a relevant point. This can be done easily with pure CSS.
Here is what I want to accomplish:




And here are the

background images we are talking about.





To accomplish this we need to do so:

HTML

  <input type=text name="nom" class="search">
 <input type="submit" class="button" value="search"/>

CSS

input.search {
background:url(search.png) left no-repeat;
padding: 1px 4px 1px 25px;
color:#3D3D3D;
background-color:#E8E8FF;
border:1px solid;
border-color: #374F7F;
font: 100% 'trebuchet ms',helvetica,sans-serif;
}

input.button {
background:url(accept.png) left no-repeat;
color:#050;
background-color:#E8E8FF;
border:1px solid;
border-color: #374F7F;
margin:2px;
padding: 0px 0px 0px 20px;
font: 100% 'trebuchet ms',helvetica,sans-serif;
}

The search class was defined to stop styling potential input fields like check boxes, radio buttons…
This can be useful also for username and password fields in order to let those fields look better.

Download Here

How to encourage this blog if you like it:

• Promote our sponsors;
• Add any kind of comment or critic;
• Ask me directly by email if you prefer.

Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.

Share this post ?

---