Background Images into Form Fields with CSS

Posted by jcargoo | Monday, December 22, 2008
| 0Delicious Twitter Reddit Digg Loading...


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 ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

1 Previous Comments
  1. Burning Black | December 30, 2008 at 10:00 PM  

    one awesome trick. thank you.