Today I will show you how you can make nice forms using CSS3 selectors and properties. I will use the following: border-radius, box-shadow, :nth-child and :checked pseudo-classes.

What can you do with :checked pseudo-class?

Well, the :checked pseudo-class is gold for form designers because it makes possible to display or hide certain form elements function of what you’ve checked. If you need to show some form fields only to the people the filled-in certain preceding fields, :checked does the job.

Let’s take a look at the form (the screen below contains all the nice improvements):

- The orange shadow under the title and the bevel effect were made with text-shadow property.

	h1 {
		text-shadow: 1px 1px White, 1px 1px 3px Orange;
	}

- The rounded corners on the form are made using the famous border-radius property.

- The yellow tooltips appear only when you roll-over an element and are shown with the help of :nth-child pseudo-class. The <div> inside the second <td> of every <tr> row has by default display:none on it. But if you :hover the td, the <div> will show up.

	tr td:nth-child(2) div {
		display:none;
		position:absolute;
		background:#FFFFCC;
		border:1px solid #FFCC99;
		padding:5px;
		left: 210px;
		top:0px;
		font-size:9px;
		min-width:150px;
	}
	tr td:nth-child(2):hover div {
		display:block;
	}

- The nice green focus effect appears because of the :focus pseudo-class. You can apply a box-shadow property on focused inputs and you get a nice usability effect.

- The last 2 fields, Business name and Business address, appear only if you check the “business owner” option. The syntax is very simple:

	div.forbusiness {display:none;} /* the content is hidden */
	input:checked + div.forbusiness {display:block} /* using the +
	selector we'll display the content when the preceding
	input is checked! */

Troubleshoot

• On Internet Explorer 8, almost everything is broken. Quite normal!
• On Firefox 3.6.3, a very fine shadow, marking the former top border place, will persist on the screen when you check the first input and show the <legend>.
• On Opera 10.5+ when you want to display the <legend> the browser will “forget” the border-radius property.
• On Safari 4.0 and Google Chrome instead of <legend> you will see a line.

View the live sample here.