Alternative Checkboxes (Icon Bullets) - Copy and paste

nickmilo · April 16, 2022, 7:24pm

Alternate checkboxes

Where did these originate? From @kepano , or elsewhere?

As I was playing around with them, I was craving a note where I could remember all the types, see what they looked like, and quickly copy and paste if needed.

Maybe you will have a similar need, so just wanted to share.

As of this post, these are the alt checkboxes in @kepano’s Minimal theme (and soon to be LYT Mode thanks to @Cecilia_May).

Copy and paste the following into a new note of yours:

Alt Checkboxes (syntax)

Use this section to remember all the types and what the syntax is:

- [ ] to-do
- [/] incomplete
- [x] done
- [-] canceled
- [>] forwarded
- [<] scheduling
- [?] question
- [!] important
- [*] star
- ["] quote
- [l] location
- [b] bookmark
- [i] information
- [S] savings
- [I] idea
- [p] pros
- [c] cons
- [f] fire
- [k] key
- [w] win
- [u] up
- [d] down

Alt Checkboxes (rendered)

After you copy and paste, make sure to remove the code block marks ``` so the alt checkboxes will render:

- [ ] to-do
- [/] incomplete
- [x] done
- [-] canceled
- [>] forwarded
- [<] scheduling
- [?] question
- [!] important
- [*] star
- ["] quote
- [l] location
- [b] bookmark
- [i] information
- [S] savings
- [I] idea
- [p] pros
- [c] cons
- [f] fire
- [k] key
- [w] win
- [u] up
- [d] down

kepano · April 17, 2022, 12:14am

I am not sure who the originator of the idea was (not me!). I think the syntax has existed prior to Obsidian in other tools.

The suggestion originally came on my radar via @ryanjamurphy in issue #8 of Minimal theme referencing a snippet by @death.au

Minimal’s implementation was late to the party and took inspiration from Sanctum, Primary and ITS Theme. However each theme has slightly different syntax so I tried to follow the conventions that are common across themes, and added a couple of my own.

The available options can be referenced in the Minimal Documentation

ryanjamurphy · April 17, 2022, 2:49pm

Noteplan has used a few specific “types” of tasks to imply that a task has been deferred or cancelled for a few years, IIRC. At least, that’s why I was originally excited by the idea of a stylable data-task attribute.

@EleanorKonik also advocated for the data-task attribute not because of the use in tasks but because it served as a way of doing bullet journal-style notations, I believe. So bullet journaling is probably another precedent!

Hermann · April 22, 2022, 2:06pm

Is there a way to add own types of checkboxes (e.g. any kind of emoji)?

nickmilo · April 27, 2022, 12:10am

I don’t know how, but if you know CSS and maybe other things, you can, again, don’t know how.

Allcry · November 24, 2022, 10:35pm

Help please, I would like to cash in some help currency.

I am trying to do these styles check boxes. All I get is a regular ticked check box.

I do this - [?] and get a checked box.

My assumptions:
So is there a conflict somewhere or a missing plug-in?
And do I need to add Css, if so where?

There seems to be a missing step between installing the minimal plugin and Style Settings plugin, and then the picture checkboxes working. Can you fill in the steps or the code needed?

Obsidan version 1.0.3

Been at this for a few days. Feeling like my last brain cells vacated my head with my sanity.

If you need me to send any more information.

Thanks in advance.

kepano · November 25, 2022, 3:54pm

You need a theme that supports this feature. The alternative checkboxes are not supported in the default theme.

elhafiedz · November 26, 2022, 7:23am

is there a way to for us to add our own alt checkbox?
maybe through css snippet?
if you could point me what to learn for prerequisites that would be helpful.
also what icon are you using for this alt checkbox?

holroy · January 8, 2023, 5:06pm

I’ve used these, and extended with even a couple more of my own, and I’ll post a little reference as to how I go about when adding more alternatives to this impressive list. But first I wanted to show two queries I use to collate my alternative checkboxes from all around my vault.

List all checkboxes of a given type

```dataview
TASK 
WHERE status="?"
```

Where you can change the "?" to match whatever checkbox type you want to see.

List all checkboxes for a list of types

```dataview
TASK
WHERE contains(list(["?", "!", "I"]), status)
```

Which lists all checkboxes with question, important or ideas. The list can of course be changed to whatever you like it to report.

Another useful set, would be the list of those referring to task statuses, like in list(" ", "/", "x", "-", ">", "<"), where depending on what kind of list you want, you could remove those you deem uninteresting for a good status overview or similar.

holroy · January 8, 2023, 5:27pm

Based upon using Minimal theme in default, I played around and found what I needed to add my own custom icons as alternative checkboxes, and I found that I need two sections with a total of 6 CSS selectors to properly define them.

Getting started

You need to add some CSS, like shown below, into a CSS file, and enable this. To do this follow this procedure:

Go to Settings > Appearance > CSS snippets, and click on the folder icon on the far right. This opens the folder where you should store your CSS snippets
Create a file in this folder, and name it something, like alternativeCheckboxes.css
Edit this folder with an ordinary text editor, and for starters I suggest copying in the code from below
After saving the file, go back to Settings > Appearance > CSS snippets, and locate your filename in the list below, and enable it

Now you should be ready to use it in your vault.

Example CSS to set three different custom checkboxes

/*** Common bits, and parts ***/
input[data-task="a"]:checked,
li[data-task="a"] > input:checked,
li[data-task="a"] > p > input:checked, 

input[data-task="F"]:checked,
li[data-task="F"] > input:checked,
li[data-task="F"] > p > input:checked,

input[data-task="w"]:checked,
li[data-task="w"] > input:checked,
li[data-task="w"] > p > input:checked 
/* No comma after previous line */
{
  --checkbox-marker-color: transparent;
  border: none;
  border-radius: 0;
  background-image: none;
  background-color: currentColor;
  color: var(--color-green);
  -webkit-mask-size: var(--checkbox-icon);
  -webkit-mask-position: 50% 50%;
}

/* Setting of the icon for the various letters */

/* a - appointment, remixicon: calendar-event-fill */ 
input[data-task="a"]:checked,
li[data-task="a"] > input:checked,
li[data-task="a"] > p > input:checked {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zM4 9v10h16V9H4zm2 4h5v4H6v-4z'/%3E%3C/svg%3E");
}

/* F - Forum, remixicon: question-answer-fill */
input[data-task="F"]:checked,
li[data-task="F"] > input:checked,
li[data-task="F"] > p > input:checked {
  color: var(--color-orange);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M8 18h10.237L20 19.385V9h1a1 1 0 0 1 1 1v13.5L17.545 20H9a1 1 0 0 1-1-1v-1zm-2.545-2L1 19.5V4a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v12H5.455z'/%3E%3C/svg%3E");
}

/* w - walking, remixicon: walk-fill */ 
input[data-task="w"]:checked,
li[data-task="w"] > input:checked,
li[data-task="w"] > p > input:checked {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M7.617 8.712l3.205-2.328A1.995 1.995 0 0 1 12.065 6a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.697 3.955 2.061 1.73 2.223 6.108-1.88.684-2.04-5.604-3.39-2.845a2 2 0 0 1-.713-1.904l.509-2.885-.677.492-2.127 2.928-1.618-1.176L7.6 8.7l.017.012zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-2.972 13.181l-3.214 3.83-1.532-1.285 2.976-3.546.746-2.18 1.791 1.5-.767 1.681z'/%3E%3C/svg%3E");
}

The three first seem to be general stuff to allow for that letter to be recognised as a task decorator, whilst the three last ones are needed to set a proper icon for the given letter.

The three icons I’ve setup here are a for appointment, F for forum related stuff and w for walking. Just three random area icons, so feel free to remove/change/… to your liking. These look like the following:

Adding new checkbox icons

Whenever I want to add another icon to the set, I repeat the following:

Open up the file we created earlier
Copy a set of three lines in the top part, and change to the new letter
Find a corresponding block in the last part, and copy that block, and change to the new letter
Find an icon to use in the -webkit-mask-image: of this last block

Finding the icons

I’ve mainly used https://remixicon.com, but other can be used but then the procedure will vary slightly, so here is what I’ve done so far:

Open the website https://remixicon.com, and search for icon of your liking
Select the filled variant, as they seem to best suited for this use
Click on the icon you want, and select Copy SVG and Data URL, hit the copy
Locate the line with -webkit-mask-image: you want to change, and delete everything from the colon, :, and to the end of the line
Paste in the icon, and remove the text background-image: so that the line reads something like: -webkit-mask-image: url( ...
Save, and your new icon should be available

Now it should show up when you add a task with your new letter within the square brackets. I’ve not needed to re-enable, or restart Obsidian to get new icons added. Just saving the CSS file usually has done it for me.

Update: If you want to remove the possibility to change these checkboxes accidentally, you can add pointer-events: none to either the general section, or a specific section. With this you can’t click away your custom status

3dRKCjr4k · January 8, 2023, 7:44pm

Thanks very much @holroy for the detailed instructions on how to add to CSS.
One question I’ve asked is how to add icons to my Vault folders? Is that possible?

Thanks in advance for your response.

holroy · January 8, 2023, 7:52pm

If you install the plugins, and follow this instruction you should get folder icons:

3dRKCjr4k · January 8, 2023, 7:56pm

Thank you! Just trying to make my Vault more visual and will try this out.
This is what my Vault looks like now, and would like to add an icon for ‘Facebook’ as an example.
Vault folders

malhashemi · April 16, 2023, 7:57pm

I really liked AnuPpuccin implementation of custom checkboxes. This SCCS File contains the custom formatting. In order to replicate this in CSS

/* Save this as a CSS Snippet alternativeCheckboxes.css */

  

/* Checkbox important ! */

input[data-task="!"]:checked::after,

li[data-task="!"]>input:checked::after,

li[data-task="!"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M96 64c0-17.7-14.3-32-32-32S32 46.3 32 64V320c0 17.7 14.3 32 32 32s32-14.3 32-32V64zM64 480c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z'/%3E%3C/svg%3E");

    -webkit-mask-size: 20%;

}

  

input[data-task="!"]:checked::before,

li[data-task="!"]>input:checked::before,

li[data-task="!"]>p>input:checked::before {

    color: var(--checkbox-color);

    margin: 0 3px;

    position: absolute;

    left: calc(var(--checkbox-size) * 1);

    font-weight: bold;

}

  

input[data-task="!"]:checked,

li[data-task="!"]>input:checked,

li[data-task="!"]>p>input:checked {

    --checkbox-color-hover: var(--color-yellow);

    background-color: var(--color-yellow);

    border-color: transparent;

    /* border-radius: 50%; */

}

  

/* Checkbox Question ? */

  

input[data-task="?"]:checked,

li[data-task="?"]>input:checked,

li[data-task="?"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="?"]:checked::after,

li[data-task="?"]>input:checked::after,

li[data-task="?"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-orange);

    left: 0;

}

  

/* Checkbox cancelled - */

input[data-task="-"]:checked::after,

li[data-task="-"]>input:checked::after,

li[data-task="-"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/%3E%3C/svg%3E");

    -webkit-mask-size: 50%;

}

  

input[data-task="-"]:checked::before,

li[data-task="-"]>input:checked::before,

li[data-task="-"]>p>input:checked::before {

    color: var(--checkbox-color);

    margin: 0 3px;

    position: absolute;

    left: calc(var(--checkbox-size) * 1);

    font-weight: bold;

}

  

input[data-task="-"]:checked,

li[data-task="-"]>input:checked,

li[data-task="-"]>p>input:checked {

    --checkbox-color-hover: var(--color-red);

    background-color: var(--color-red);

    border-color: transparent;

    /* border-radius: 50%; */

}

  

/* Checkbox bookmark b */

  

input[data-task="b"]:checked,

li[data-task="b"]>input:checked,

li[data-task="b"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="b"]:checked::after,

li[data-task="b"]>input:checked::after,

li[data-task="b"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-red);

    left: 0;

}

  

/* Checkbox Idea I */

  

input[data-task="I"]:checked,

li[data-task="I"]>input:checked,

li[data-task="I"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="I"]:checked::after,

li[data-task="I"]>input:checked::after,

li[data-task="I"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-yellow);

    left: 0;

}

  

/* Checkbox Pro p */

  

input[data-task="p"]:checked,

li[data-task="p"]>input:checked,

li[data-task="p"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="p"]:checked::after,

li[data-task="p"]>input:checked::after,

li[data-task="p"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 25.3-19.5 46-44.3 47.9c7.7 8.5 12.3 19.8 12.3 32.1c0 23.4-16.8 42.9-38.9 47.1c4.4 7.2 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-green);

    left: 0;

}

  

/* Checkbox Con c */

  

input[data-task="c"]:checked,

li[data-task="c"]>input:checked,

li[data-task="c"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="c"]:checked::after,

li[data-task="c"]>input:checked::after,

li[data-task="c"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M313.4 479.1c26-5.2 42.9-30.5 37.7-56.5l-2.3-11.4c-5.3-26.7-15.1-52.1-28.8-75.2H464c26.5 0 48-21.5 48-48c0-25.3-19.5-46-44.3-47.9c7.7-8.5 12.3-19.8 12.3-32.1c0-23.4-16.8-42.9-38.9-47.1c4.4-7.3 6.9-15.8 6.9-24.9c0-21.3-13.9-39.4-33.1-45.6c.7-3.3 1.1-6.8 1.1-10.4c0-26.5-21.5-48-48-48H294.5c-19 0-37.5 5.6-53.3 16.1L202.7 73.8C176 91.6 160 121.6 160 153.7V192v48 24.9c0 29.2 13.3 56.7 36 75l7.4 5.9c26.5 21.2 44.6 51 51.2 84.2l2.3 11.4c5.2 26 30.5 42.9 56.5 37.7zM32 320H96c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64V288c0 17.7 14.3 32 32 32z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-red);

    left: 0;

}

  

/* Checkbox Information i */

  

input[data-task="i"]:checked,

li[data-task="i"]>input:checked,

li[data-task="i"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="i"]:checked::after,

li[data-task="i"]>input:checked::after,

li[data-task="i"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-blue);

    left: 0;

}

  

/* Checkbox Location l */

  

input[data-task="l"]:checked,

li[data-task="l"]>input:checked,

li[data-task="l"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="l"]:checked::after,

li[data-task="l"]>input:checked::after,

li[data-task="l"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 256c-35.3 0-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64s-28.7 64-64 64z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-purple);

    left: 0;

}

  

/* Checkbox Star * */

  

input[data-task="*"]:checked,

li[data-task="*"]>input:checked,

li[data-task="*"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="*"]:checked::after,

li[data-task="*"]>input:checked::after,

li[data-task="*"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    background-color: var(--color-yellow);

    left: 0;

}

  

/* Checkbox Note n */

  

input[data-task="n"]:checked,

li[data-task="n"]>input:checked,

li[data-task="n"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="n"]:checked::after,

li[data-task="n"]>input:checked::after,

li[data-task="n"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M32 32C32 14.3 46.3 0 64 0H320c17.7 0 32 14.3 32 32s-14.3 32-32 32H290.5l11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3H32c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64H64C46.3 64 32 49.7 32 32zM160 384h64v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384z'/%3E%3C/svg%3E");

    -webkit-mask-size:contain;

    background-color: var(--color-red);

    left: 0;

}

  

/* Checkbox Amount S */

  

input[data-task="S"]:checked,

li[data-task="S"]>input:checked,

li[data-task="S"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="S"]:checked::after,

li[data-task="S"]>input:checked::after,

li[data-task="S"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M320 96H192L144.6 24.9C137.5 14.2 145.1 0 157.9 0H354.1c12.8 0 20.4 14.2 13.3 24.9L320 96zM192 128H320c3.8 2.5 8.1 5.3 13 8.4C389.7 172.7 512 250.9 512 416c0 53-43 96-96 96H96c-53 0-96-43-96-96C0 250.9 122.3 172.7 179 136.4l0 0 0 0c4.8-3.1 9.2-5.9 13-8.4zm84.1 96c0-11.1-9-20.1-20.1-20.1s-20.1 9-20.1 20.1v6c-5.6 1.2-10.9 2.9-15.9 5.1c-15 6.8-27.9 19.4-31.1 37.7c-1.8 10.2-.8 20 3.4 29c4.2 8.8 10.7 15 17.3 19.5c11.6 7.9 26.9 12.5 38.6 16l2.2 .7c13.9 4.2 23.4 7.4 29.3 11.7c2.5 1.8 3.4 3.2 3.8 4.1c.3 .8 .9 2.6 .2 6.7c-.6 3.5-2.5 6.4-8 8.8c-6.1 2.6-16 3.9-28.8 1.9c-6-1-16.7-4.6-26.2-7.9l0 0 0 0 0 0 0 0c-2.2-.8-4.3-1.5-6.3-2.1c-10.5-3.5-21.8 2.2-25.3 12.7s2.2 21.8 12.7 25.3c1.2 .4 2.7 .9 4.4 1.5c7.9 2.7 20.3 6.9 29.8 9.1V416c0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1v-5.5c5.4-1 10.5-2.5 15.4-4.6c15.7-6.7 28.4-19.7 31.6-38.7c1.8-10.4 1-20.3-3-29.4c-3.9-9-10.2-15.6-16.9-20.5c-12.2-8.8-28.3-13.7-40.4-17.4l-.8-.2c-14.2-4.3-23.8-7.3-29.9-11.4c-2.6-1.8-3.4-3-3.6-3.5c-.2-.3-.7-1.6-.1-5c.3-1.9 1.9-5.2 8.2-8.1c6.4-2.9 16.4-4.5 28.6-2.6c4.3 .7 17.9 3.3 21.7 4.3c10.7 2.8 21.6-3.5 24.5-14.2s-3.5-21.6-14.2-24.5c-4.4-1.2-14.4-3.2-21-4.4V224z'/%3E%3C/svg%3E");

    -webkit-mask-size:contain;

    background-color: var(--color-green);

    left: 0;

}

  

/* Checkbox In Progress / */

  

input[data-task="/"]:checked,

li[data-task="/"]>input:checked,

li[data-task="/"]>p>input:checked {

    --checkbox-color: var(--color-base-50);

    --checkbox-color-hover: var(--color-base-50);

    border-width: 1px;

  

}

  

input[data-task="/"]:checked::after,

li[data-task="/"]>input:checked::after,

li[data-task="/"]>p>input:checked::after {

    background-color: transparent;

}

  

/* Checkbox Scheduled < */

  

input[data-task="<"]:checked,

li[data-task="<"]>input:checked,

li[data-task="<"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task="<"]:checked::after,

li[data-task="<"]>input:checked::after,

li[data-task="<"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z'/%3E%3C/svg%3E");

    -webkit-mask-size:contain;

    background-color: var(--color-cyan);

    left: 0;

}

  

/* Checkbox Rescheduled > */

  

input[data-task=">"]:checked,

li[data-task=">"]>input:checked,

li[data-task=">"]>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task=">"]:checked::after,

li[data-task=">"]>input:checked::after,

li[data-task=">"]>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/svg%3E");

    -webkit-mask-size:contain;

    background-color: var(--color-blue);

    left: 0;

}

  

/* Checkbox Quote " */

  

input[data-task='"']:checked,

li[data-task='"']>input:checked,

li[data-task='"']>p>input:checked {

    --checkbox-color: transparent;

    --checkbox-color-hover: transparent;

    border-width: 0;

}

  

input[data-task='"']:checked::after,

li[data-task='"']>input:checked::after,

li[data-task='"']>p>input:checked::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z'/%3E%3C/svg%3E");

    -webkit-mask-size:contain;

    background-color: var(--color-base-50);

    left: 0;

}

Below is how they look like in the default theme

Syntax	Description
`- [ ]`	Unchecked
`- [x]`	Checked
`- [>]`	Rescheduled
`- [<]`	Scheduled
`- [!]`	Important
`- [-]`	Cancelled
`- [/]`	In Progress
`- [?]`	Question
`- [*]`	Star
`- [n]`	Note
`- [l]`	Location
`- [i]`	Information
`- [I]`	Idea
`- [S]`	Amount
`- [p]`	Pro
`- [c]`	Con
`- [b]`	Bookmark
`- ["]`	Quote

iyaoyao · September 1, 2023, 7:26pm

Hi, could you teach me how to modify this CSS, so I can the text strikethrough when I mark it as cancelled? Appreciate a lot!

Michael-N-N · September 14, 2023, 5:40pm

@holroy: thank you for sharing. That was very helpful for me.

Am I missing something or is pointer-events: none only working in the “reading” mode and not in the “live preview”?

efemkay · September 15, 2023, 12:53am

hey there. here’s how use the pointer-event: none for both reading and editing view to prevent accidental clicks. I trimmed down the example for checkbox with * i.e. - [*] Star. repeat for other alternate checkbox you would need.

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

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

holroy · September 15, 2023, 1:01am

I’m nearly never in live preview, and don’t misclick that often, so I didn’t even know it didn’t work there.

Thankfully, @efemkay which is much more proficient than me in CSS saved the day!

Michael-N-N · September 15, 2023, 4:15pm

Thank you, that works perfect!

MangoBee · November 21, 2023, 4:04pm

Thanks you for sharing, that helps me alot!