Stylized CSS textbox

I recently had to style textboxes on a site and didn’t want to use anything that involved a hack or workaround.  What I ended up with is a pretty simple solution, you just have to wrap every textbox in the background image you would like. This could technically work for all of your other form elements as well, the process would be very similar.

First you need to apply a CSS global clear.  If you aren’t already using something like this then you are causing yourself way to many headaches with trying to get your site to work in all browsers.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: arial;
    vertical-align: baseline;
    background: transparent;
}
:focus {
    outline: 0;
}

Then add the style that displays the background image for the textbox

.background{background: url(/images/layout/text-field.jpg) no-repeat;}

Then add the class for textboxes.

.text{
	margin:0px 0px 0px 8px;
	width: 145px;
	height: 17px;
border: none;
	background:transparent;
	color: #666;
}

adjust your styles as needed.

Then to get your textbox to appear it needs to be like this…

<div class="background">
<input id="name" class="text" name="name" type="text" /></div>

which should output this… (might need to adjust the margin for the input box)