Styling a form using CSS

Ok in this tutorial we are going to teach you haw to style a web form, we will go through 3 basic options on a form; input, select and textarea.

 

Firstly input, an input box as you probably already know is a box users type details in i.e name.

 

To style this box you can put this isn your CSS:

input {
 background-color: #F0F0F0;
 color: #000;
 border: 1px solid #000;
 font-family: Verdana, Tahoma;
}

You can change the css to make the input boxes to display differently.

Next is select, this tag creates a list menu this is seen on forms in a drop down box where users select options.

select {
 background-color: #F0F0F0;
 color: #000;
}

Last up is textarea, this tag is used on forms to create a message box. Again the CSS is pretty easy to modify.

textarea {
 background-color: #F0F0F0;
 color: #000;
}

If you enjoyed this post you might enjoy these:

2 Comments to “Styling a form using CSS”

#1 Posted by Quick Sale Houses (01.10.08 at 23:47 )

Cheers! Just used these tips for a form on my new site!

#2 Posted by admin (02.10.08 at 00:01 )

No Problem, glad it helped you :) If possible it would be great to see what you done I plan on making a new article with examples of styled forms and will definitely include yours.