Styling forms

In this example, I provide both starting and ending files. Your mission is to approximate the end result (shown in the image below) using your knowledge of CSS-3. Do not use any classes or identifiers in your HTML. Use only the starting HTML provided. How close can you come to the result below? Note also this will work in Mozilla and WebKit based browsers only at this time. Try other browsers as well to see what is supported and what is not.

Starting form (visual)

Screen capture of starting form









Finished form (styled with CSS-3). no classes or identifiers are used.

Screen capture of ending form with CSS stylling








Peek at the source code in the ending example (if you must), but try to duplicate this as closely as you can using the knowledge you have gained so far.


Leave a Reply

Your email address will not be published. Required fields are marked *