Tuesday, May 29, 2007

[code] Pretty Form CSS

Clean CSS for making a pretty form with Field Set, Legend, and Focus:

form.pretty-form {margin: 0; padding: 0;}
form.pretty-form fieldset {border: 1px solid #ddd; padding: 4px 8px 10px 8px}
form.pretty-form legend {color: #1f9dbd; font-weight: bold}
form.pretty-form label {display: block; font-weight: bold}
form.pretty-form label span {font-weight: normal; font-size: 10px}
form.pretty-form label span.required {color: #b00}
form.pretty-form label span.optional {color: gray}
form.pretty-form input.pretty-field {padding: 2px 5px; border: 1px solid #999}
form.pretty-form input.pretty-field:focus {background-color: #fffadb; border: 1px solid #cbb945; color: #776b1b}