Style tasks by completion character

Problem: I wanted to format canceled tasks differently than regular completed tasks. I’m defining a “canceled” task as one where there is a dash in the brackets instead of an x. I would like canceled tasks to have a grey checkmark, and have grey (but not strikethrough) text.

Example:

image

Solution: To accomplish this, I took advantage of the fact that Obsidian records which character was used to check a task in the data-task attribute of the <li> item:

image

So this CSS does the trick:

/* ==================================================================== */
/* CHECKLISTS                                                           */
/* ==================================================================== */

/* Special handling for canceled tasks, e.g.
 * - [x] This is done
 * - [-] This was canceled
 * - [ ] Needs doing
 */

/* Make canceled item text gray but not struck out. */
ul > li.task-list-item[data-task="-"] {
    color: var(--text-faint);
}

/* Make canceled checkbox light gray */
ul > li.task-list-item[data-task="-"] > input {
    filter: grayscale(100%) opacity(25%);
}
1 Like

Another option is to use the Obsidian Snippetor plugin:

1 Like