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;
}
3 Likes
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);
}
1 Like
28

It didnā€™t work for me for the minimal theme

This code works to get the text strike-through for a cancelled item

body:not(.tasks) .markdown-preview-view ul li[data-task="a"].task-list-item.is-checked,
	body:not(.tasks) .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="a"]),
	body:not(.tasks) li[data-task="a"].task-list-item.is-checked{
	color:var(--text-faint);
	text-decoration:line-through solid var(--text-faint) 1px
	}
29

Life saver!

30

Just a note on disabling the pointer events here - I applied this and it worked perfectly: except.that typing started lagging when badly when editing a task line. Something about the CSS querying seems to be make for very heavy lifting (using the minimal theme for full context).

31

This is awesome! Actually this right here is one of the reasons I left Notion for Obsidian. Try doing things like this with Notion. Yeahā€¦ exactly. Thanks for sharing!

32

Thank you so much! Works like a charm 2 years later haha

33

Is there a way to get checkbox outlines to be thicker? Iā€™m experimenting with using Obsidian on a Boox Go 7, and itā€™s working well so far. The main initial issue is that the lines that define the shapes of the checkboxes are so thin theyā€™re essentially invisible on the device, both in light and dark mode, and even if I pump up the font size. Thanks.