He really loves people typing words into him but he doesn’t want to be sad anymore. CSS Input Box has been neglected for too long. His friends Bookmark, Banner and Background have been given the makeover treatment, while the trusty Input Box is doing most of the work.  It’s time he deserves some tender loving care and he needs your help. This page shows you how.

Old Style Box

New Style White Box

HTML
<input type=text class=freshwhite>

CSS
input.freshwhite{
font-size:18px;
background: url(input-box-white387a.png) left center no-repeat;
height:43px;
width:451px;
border:0px;
padding-top:10px;
padding-bottom:3px;
padding-left:18px;
margin-right:15px;
outline: none;
}

input.freshwhite:hover{
background: url(input-box-white387b.png) transparent left center no-repeat;
}

input.freshwhite:focus{
background: url(input-box-white387a.png) transparent left center no-repeat;
}​
IMAGES
copy these to the same folder as the CSS

input-box-white387a.png

input-box-white387b.png

New Style Blue Box

HTML
<input type=text class=freshblue>

CSS

input.freshblue{
font-size:18px;
background: url(input-box-blue339a.png) left center no-repeat;
height:43px;
width:451px;
border:0px;
padding-top:10px;
padding-bottom:3px;
padding-left:18px;
margin-right:15px;
outline: none;
}

input.freshblue:hover{
background: url(input-box-blue339b.png) transparent left center no-repeat;
}

input.freshblue:focus{
background: url(input-box-blue339a.png) transparent left center no-repeat;
}

IMAGES

copy these to the same folder as the CSS

input-box-blue339a.png

input-box-blue339b.png

Download this photoshop psd to make your own style and size
Download all files in this project