CSS: Styling a Yes/No Checklist

Tweet 0 Shares 0 Tweets 0 Comments

This is a very simple task - to mark up a checklist in HTML and CSS where each item in the list has either a tick or a cross to indicate its status.

HTML markup

We start with a basic list, which can be UL or OL depending on what makes sense semantically for your content:

<ol class="yesno">
  <li class="yes">Drink some water</li>
  <li class="yes">Brush your teeth</li>
  <li class="no">Make your bed</li>
  <li class="yes">Get dressed</li>
  <li class="yes">Eat breakfast</li>
  <li class="no">Exercise</li>
</ol>

Halfway there, we just need to apply CSS to the classes.

CSS markup

We start by disabling the default list numbers or bullets by using list-style-type: none;. Then we insert a ::before pseudo-element using UNICODE characters to represent 'yes' and 'no':

<style>

  .yesno {
    margin: 1em 0;
    padding: 0 1.5em;
    list-style-type: none;
  }
  .yesno > li::before {
    display: inline-block;
    padding-right: 0.35em;
    width: 0.6em;
    font-size: 1.2em;
  }
  .yesno > li.yes::before {
    content: "\2713"; /* check mark */
    color: green;
  }
  .yesno > li.no::before {
    content: "\2717"; /* ballot X */
    color: red;
  }

</style>

You could also use an image rather than a UNICODE character here for more consistency across browsers and platforms. Or different characters (see below).

Final Result

What we end up is a simple checklist where a 'yes' is represented by a green tick mark and 'no' by a red cross:

Drink some water
Brush your teeth
Make your bed
Get dressed
Eat breakfast
Exercise

Alternative characters

Depending on your requirements, a checkbox (ballot box) may be more appropriate and is also available in UNICODE:

Drink some water
Brush your teeth
Make your bed
Get dressed
Each breakfast
Exercise

Using actual checkboxes

As described in this earlier article you can use a similar approach to substitute UNICODE characters for actual HTML checkboxes.

The list below is a clickable form, for example, and the markers will change according to the underlying checkbox state:

Again, all of the styling has been done using only HTML and CSS and doesn't require images or other resources. Just be careful relying on UNICODE as some of the newer characters may not be present in all browsers.

< CSS

Post your comment or question