• Name: Note Please enter both your first and last name.
• Phone: Note Please enter your phone number as xxx-xxx-xxxx - -
• Password: Note Write this down! It's a secret!
• Email:

This example is a combination of attribute selectors, image-less arrows (using borders), ability to dynamically show content by using the :hover selector, rounded corners and general form layout. No Javascript is used. As CSS3 is used heavily, mileage may vary depending on your browser. Safari works perfectly with an image-less shadow under the note. Firefox 3 should render it the same, minus this shadow. Opera and IE7 should render the same as Firefox 3, but with no rounded corners. IE6 will ignore the dynamic abilities of the note entirely (in the hopes that this can be considered a "graceful" degredation).

Due to the use of attribute selectors, IE6 will garble the form elements - that's the easy part to fix by simply adding classes to your elements. The use of attribute selectors is simply for demonstration.