Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
A CSS boilerplate for creating layers of feedback for your forms http://blog.frankmtaylor.com
Fetching latest commit…
Cannot retrieve the latest commit at this time.
|Failed to load latest commit information.|
Author: Frank M. Taylor. HTML Notes: This form feedback boiler plate assumes that the label appears after the input field. This allows us to use the ~ sibling selector with the fields' dynamic pseudo classes to bold a label when the user is typing. References: My blog post: http://blog.frankmtaylor.com/2011/12/04/layering-the-feedback-with-css/; http://blog.frankmtaylor.com/2011/12/13/a-css-form-feedback-boilerplate/; Usage: This uses object-oriented CSS. Shape and position elements as you see fit. I've broken everything up into four distinct layers, and provided comments which capture each layer. To style the label for Radio buttons, I used an attribute selector for the "for" value of the label. Whatever you name your radio buttons (and their subsequent label), you need to change this line in the CSS. Layer four is when the user is in the last form field before the submit button. The non CSS3 selection means you know what the last form-field is… in this case it's textarea. You'll need to adjust that. The CSS3 method won't require that at all. Changes: Version1.1: Added normalize.css so the form behaves properly in all browsers. Added fieldsets to the HTML and wrapped the checkboxes and radios in the fieldsets Added CSS for the fieldset legends known issues and TODOs: when the user is focused on inputs in fieldsets, the legend doesn't go to the third state add labels to the inputs inside of fieldsets