Alternative Checkboxes (Icon Bullets) - Copy and paste

Share & showcase
22

Thanks for extensive Guidance!

23

Awesome “how to” :star_struck: Thank you !!

1 Like
24

Here’s a modification if you want to disable clicks for all custom checkboxes except for [ ] and [x].

(I haven’t extensively tested this so I’m not confident that this doesn’t break anything else)

/* Disable click in Reading View */
input[data-task]:not(input[data-task=" "], input[data-task="x"]):checked,
li[data-task]:not(li[data-task=" "], li[data-task="x"]) > input:checked,
li[data-task]:not(li[data-task=" "], li[data-task="x"]) > p > input:checked {
    pointer-events: none;
}

/* Disable click in Editing View (Live Preview) */
label.task-list-label:has(> input[data-task]:not(input[data-task=" "], input[data-task="x"]):checked) {
    pointer-events: none;
}
1 Like
25

Thanks a lot @holroy :+1:
Works like a charm
I see that you can download the icon pack to you own system. How can I change the -webkit-mask-image to point to a local file instead?

1 Like
26

Sorry for replying to an old thread but I just came across this today and I wanted to get the text strike-through for a cancelled item as well.

With a bit tinkering, the below snippet worked for me:

.HyperMD-task-line[data-task="-"] {
  text-decoration: var(--checklist-done-decoration);
}