In this tutorial, I want to show you how I personally style my form input fields that is cross browser compatible all with just CSS.

We’ve all created forms on websites whether it be a blog, e-commerce or even a personal site. There must always be a way to contact the site owner right? I could remember years back when I personally had trouble styling form elements because I couldn’t get the input text to align properly inside the input field and the text would sometimes break out of the style. The way I did it in the past was declared a background image on the input element which I soon found will not work correctly. Instead I needed to put the background image on a hook like a paragraph tag and absolutely position the input element within the background image thus allowing full control of the position of the text input. Lets first see what we’ll achieve.

CLICK TO VIEW DEMO

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 action="" method="post" id="nice-form">
        	<fieldset>
            	<legend>Nice Contact Form</legend>
                    <p><label for="name">Name:</label><br />
                        <input type="text" name="name" value=""/>
                    </p>
                    <p><label for="email">Email:</label><br />
                        <input type="email" name="email" value="" />
                    </p>
                    <p><label for="message" name="message">Message:</label><br />
                        <textarea name="message" cols="40" rows="10"></textarea>
                    </p>
          </fieldset>
                    <p><input type="submit" value="Submit" name="submit" class="button" /></p>
        </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!

Be Sociable, Share!

•