Designing Forms with CSS and Image Replacement for Buttons

***view Edit HTML for source code***

BASIC FORM CODING

First name:


Last name:


email:


Male

Female

CSS CODING FOR BG IMAGE REPLACEMENT FOR BUTTONS/INPUT FEILDS
.fieldset .textfield {
margin:3px;
height:20px;
width:200px;
/** hides input element but keeps function **/
border:solid 0 #fff;
background: transparent

/** add bg img and browser fixes **/
url("graphics/textfield_bg.gif") no-repeat fixed; }


fieldset>input.textfield {
background: transparent
url("graphics/textfield_bg.gif") no-repeat; }

------------------------------------------------------
IE5

#login input.button:hover
{

background-image:url(../images/login.png);
background-repeat: no-repeat;
height: 69px;
width: 70px;
}

-------------- http://www.rtbwizards.com/helpcenter/cssforms.htm

Warning: you cannot have both a submit button image and a reset button image. Using an image will cause the reset button to also submit the form in Internet Explorer.
From this:





To this:





http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html