So in a follow-up to my post on layering the feedback with CSS, I’ve created a simple starting point with styling our forms: a form feedback boiler plate.

I did my best to use an object-oriented approach with the CSS, so you should be able to fit this right into your existing designs. There are only three HTML assumptions for which you’ll need to account:

1. The label appears after the field which it represents
2. Any fields which are required use the class="required"
3. Multiple radio buttons use one label, and you’ll have to use an attribute selector on the name of the radio buttons.  I just used the name “radio”, so you’ll need to find this and adjust accordingly: label[for="radio"]

The Bonus Feedback Layer

I added one piece of flare that wasn’t really mentioned in the previous post: The “pre-submission” layer. In my HTML, the last field is textarea. I decided it would be really cool if the user gets through all the form fields, and then when they’re in the last form field, the submit button turns green (indicating they’re clear to submit the form). So I used a sibling pseudo-selector with textarea‘s :focus.

  textarea:focus ~ input[type="submit"]{
    border: 1px solid #01cb3e;
    color:#444;
    background: #01cb3e;
}
  form textarea ~ input[type="submit"]:hover{
    background:#01cb3e;
    border-color: #01cb3e;
    color: #444;
}

Now, there is a way to do this with CSS3 selectors, and it’ll make your head hurt:

form > :nth-last-child(-n+3):focus ~ input[type="submit"]

We start with form and we use the child selector to get the last child, and count up from the end through the third-to-last. Then we apply the dynamic pseudo class :focus. Finally,  we use a non-adjacent sibling selector to grab on to the submit button.  Basically we count from the last three elements inside the form and start looking for a submit button.

Time to see the boilerplate in action:

Link on CSS Desk

JSFiddle

Download from Dropbox