Adding checkboxes to a printed (or online) checklist

I’m currently working on a project that includes creating checklists. These aren’t HTML forms….but rather agenda items that can be checked off as they are addressed.  The checklist has to look good in both online and printed help AND they exist as list items in multi-level lists.

I checked the special character addition feature in Flare and didn’t really see a check box. Additionally, I looked through the unicode lookup URL (admittedly rather casually) and didn’t see what I wanted. So, I created one in Adobe Fireworks:

It’s simple…no drop shadows, nothing. If you want to know how I created it, please let me know.

Since these checkboxes will be used as a bullet for a list item, I had to create a new style class for the <li> tag.  Then I had to create a custom bullet for the new class:

1. Open your stylesheet and scroll to the li tag. Select it.
2. In the stylesheet editor, click Add Class.
3. Name the new class something that will clearly identify what you’re building. In this instance, I used ‘checkbox.’
4. Go to the List section of that li tag and insert the image in the ‘list-style-image’ element.
5. Assign the new li styleclass to the list items to see your changes.

Here’s what my checklist looks like:

Now, I haven’t set any padding or margins…so this is straight out of the box. Not bad!