I took the liberty of commenting anything that is not immediately clear in the CSS.

Now let’s take a look at the code.

HTML

<form id="nice-form" method="post"> <fieldset>
<legend>Nice Contact Form</legend>
<label for="name">Name:</label>
<input name="name" type="text" /><label for="email">Email:</label>
<input name="email" type="email" /><label for="message">Message:</label>
<textarea cols="40" rows="10" name="message"></textarea>
</fieldset>
<input name="submit" type="submit" value="Submit" /> </form>

CSS

html, body {
margin:0;
padding:0;
}
#wrapper {
margin:0 auto;
width:960px;
}
fieldset {
border:none;
}
legend {
font-size:30px;
color:#BD2B7B;
font-family:Georgia, "Times New Roman", Times, serif;
}
#nice-form {
float:right;
margin:20px auto;
width:470px;
}
#nice-form label {
text-indent:-9999px; /*  Move the text off the screen while still keeping accessibility */
display:inline-block;
}
#nice-form p.name {
background:url(../images/nameinput.png) no-repeat scroll top left;
width:446px;
height:62px;
position:relative; /* To allow child containers to be positioned absolutely */
clear:both;
display:block;
}
#nice-form p.name input {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:10px;
left:130px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:30px;
width:300px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
display:block;
}
#nice-form p.email {
background:url(../images/emailinput.png) no-repeat scroll top left;
width:446px;
height:62px;
position:relative;
clear:both;
display:block;
}
#nice-form p.email input {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:10px;
left:130px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:30px;
width:300px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
display:block;
}
#nice-form p.textarea {
background:url(../images/textinput.png) no-repeat scroll top left;
width:446px;
height:302px;
position:relative;
}
#nice-form p.textarea textarea {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:20px;
left:140px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:20px;
width:290px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
overflow:auto; /* This ensures that there should be any text overflow, it would automatically determine to use vertical and horizontal scrollbars */
display:block;
}
#nice-form .button {
background:url(../images/button.png) no-repeat top left;
width:121px;
height:57px;
text-indent:-9999px;  /*  Move the text off the screen while still keeping accessibility */
border:none; /* This sets the background color to none so you will not see a default white */
cursor:pointer; /*Since we are using a background image, this will set the mouse cursor to change when hovering over so you know it is a clickable button */
overflow:hidden; /* hides any graphic/image element if it overflows */
display:block;
line-height:0; /* this is really a hack for IE6 and IE7 because text-indent will not work here unless the line-height is set to zero */
}

This technique has been tested on IE6,IE7,IE8,FF (latest), Opera (latest), Safari (latest), and Chrome (latest).

Although I know this wasn’t a step by step tutorial but I figure the comments on the stylesheet should explain most of whats going on. But if for some reason you think this does not suffice, please let me know and I will write this out in a tutorial step by step style. Enjoy and have fun!

Random Posts

• February 6, 2010 -- Microsoft Word 2007 Tips, Tricks, and Tutorials (5)
• November 16, 2009 -- Fire Text Tutorial (1)
• July 28, 2009 -- How to make Backgrounds and Wallpaper (3)
• August 7, 2010 -- How to Make Hitman in Adobe Illustrator (24)
• May 11, 2010 -- 40+ Outstanding CSS3 Tutorials for Web Development (16)
• August 19, 2010 -- 40+ Excellent Photoshop Photo Manipulation Tutorial (9)
• July 30, 2010 -- PHP Login Script Tutorial (13)
• December 4, 2009 -- Folding Paper Effect (18)
• August 3, 2009 -- Fun With Facial Hair (2)
• July 9, 2009 -- Turn A Photo Into A Sketch For Making Coloring Books (0)