Responsive Checklist
The internet is overflowing with lists of instructions for doing stuff but how many of them think to add checkboxes?
The longer the list and the more complicated the instructions, the more the visitor is likely to lose the place - and their temper!
Checking off items as they are completed makes the whole task go easier.
Checkboxes are easy to create using HTML but are pretty much useless in their standard form as rendered by the browser. Styling them is not so straight forward so this widget has been created to take all the hard work and knowledge out of the equation.
The List
The widget has an optional h1 heading and a list with checkboxes. The list can accommodate up to 100 items which should be enough for most situations!
Each item is preceded by a checkbox. When clicked, a colored checkmark on a contrasting background appears.
The list style types available are …
disc|circle|square|none|decimal|decimal-leading-zero|lower-alpha|upper-alpha
… although numbers or letters will be used in most cases. The vertical spacing of the list items can be adjusted.
Container
The container can be styled with a border and/or a box shadow. It has adjustable padding and can be spaced vertically from the items above and below it.
Both the container and the wrapper can have their background opacity adjusted if required to float the item over a fancy background.