Enhancement: Task list: change / add class to <li> item when checked as complete #229

New Issue

claunia · 2026-01-29T14:30:55Z

claunia commented

2026-01-29 14:30:55 +00:00

Originally created by @ckuhlmann on GitHub (Oct 19, 2018).

It would be great if the list items in the task list that contain checked checkboxes would get an (additional) class that indicates this state. This would make it much easier to style the list via css (e.g. allow CSS version 2 styling without using scripts).
Thanks for considering.

current output:

<ul class="contains-task-list">
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 1</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 2</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> Checked Item 3</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 4</li>
</ul>

suggested output:

<ul class="contains-task-list">
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 1</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 2</li>
<li class="task-list-item-checked"><input disabled="disabled" type="checkbox" checked="checked" /> Checked Item 3</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 4</li>
</ul>

alternative suggested output:

<ul class="contains-task-list">
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 1</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 2</li>
<li class="task-list-item task-list-item-checked"><input disabled="disabled" type="checkbox" checked="checked" /> Checked Item 3</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 4</li>
</ul>

Originally created by @ckuhlmann on GitHub (Oct 19, 2018). It would be great if the list items in the task list that contain checked checkboxes would get an (additional) class that indicates this state. This would make it much easier to style the list via css (e.g. allow CSS version 2 styling without using scripts). Thanks for considering. current output: ``` <ul class="contains-task-list"> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 1</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 2</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> Checked Item 3</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 4</li> </ul> ``` suggested output: ``` <ul class="contains-task-list"> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 1</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 2</li> <li class="task-list-item-checked"><input disabled="disabled" type="checkbox" checked="checked" /> Checked Item 3</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 4</li> </ul> ``` alternative suggested output: ``` <ul class="contains-task-list"> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 1</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 2</li> <li class="task-list-item task-list-item-checked"><input disabled="disabled" type="checkbox" checked="checked" /> Checked Item 3</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item 4</li> </ul> ```

claunia added the question label 2026-01-29 14:30:55 +00:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#229