[!info]- Overview Methods used:

45 codes: 44 themes + 1 snippet

38/45 use -webkit-mask-image

14/45 use background-image

5/45 use content

2/45 use background-color (Sparkling Night/Day, from the same dev)

19/45 use a specific approach for - [/]

1/45 use a special approach for progress icons

Mix inside the same theme:

13/45 use both -webkit-mask-image and background-image. They are mostly inspired/copied from [[#Minimal]].

1/45 use both -webkit-mask-image and content (Listive)

[!NOTE]- Tableau

-webkit-mask-image background-image content background-color Special - [/] Special progress

[[#Minimal]] 1 1 1

[[#Things]] 1 1 1

[[#Blue Topaz]] 1 1 1

[[#AnuPpuccin]] 1 1

[[#Sanctum]] 1

[[#ITS]] 1

[[#Primary]] 1 1

[[#Tokyo Night]] 1

[[#Border]] 1

[[#Spectrum]] 1

[[#Cyber Glow]] 1

[[#LYT Mode]] 1 1

[[#Shiba Inu]] 1

[[#PLN]] 1

[[#Obsidianotion]] 1 1 1

[[#Maple]] 1

[[#EbullientWorks]] 1 1

[[#Pine Forest Berry]] 1 1 1

[[#Aura]] 1

[[#Vicious]] 1

[[#Simple]] 1 1 1

[[#Elegance]] 1 1 1

[[#Material Ocean]] 1 1

[[#Sparkling Night]] 1

[[#Kakano]] 1

[[#Neo]] 1 1

[[#Feather]] 1 1 1

[[#Listive]] 1 1

[[#MagicUser]] 1

[[#Qlean]] 1

[[#Yue]] 1 1 1

[[#sQdthOne]] 1

[[#Dracula Plus]] 1 1 1

[[#Solitude]] 1

[[#Prime]] 1 1 1

[[#Sanctum Reborn]] 1

[[#Underwater]] 1

[[#Nightingale]] 1

[[#Reshi]] 1

[[#Shade Sanctuary]] 1 1 1

[[#Sparkling Day]] 1

[[#Oreo]] 1 1 1

[[#Gummy Revived]] 1

[[#Lorens]] 1

[[#Phoenix (snippet)]] 1 1

Minimal

Distributed under the MIT License

With mask image

[>] Forwarded - [>]
[<] Scheduling - [<]
[!] Important - [!]
[-] Cancelled - [-]
[*] Star - [*]
[l] Location - [l]
[I] Idea - [I]
[p] Pros - [p]
[c] Cons - [c]
[f] Fire - [f]
[k] Key - [k]
[w] Win - [w]
[u] Up - [u]
[d] Down - [d]

input[data-task=">"],
li[data-task=">"] > input,
li[data-task=">"] > p > input {
	&:checked {
		--checkbox-marker-color: transparent;
		border:none;
		border-radius:0;
		background-image:none;
		background-color:currentColor;
		-webkit-mask-size:var(--checkbox-icon);
		-webkit-mask-position:50% 50%;
	}
}

input[data-task=">"],
li[data-task=">"] > input,
li[data-task=">"] > p > input, {
	&:checked {
		color:var(--text-faint);
		-webkit-mask-position:50% 100%;
		-webkit-mask-image: url("data:image/svg+xml,...");
	}
}

With background image

[?] Question - [?]
["] Quote - ["]
[i] Information - [i]
[S] Savings - [S]

input[data-task="?"],
li[data-task="?"] > input,
li[data-task="?"] > p > input, {
	&:checked {
		--checkbox-marker-color: transparent;
		background-color:var(--color-yellow);
		border-color:var(--color-yellow);
		background-position:50% 50%;
		background-size:200% 90%;
		background-image: url('data:image/svg+xml,...');
	}
	.theme-dark & {
		&:checked {
			background-image: url('data:image/svg+xml,...');
		}
	}
}

Other method(s)

[/] Incomplete - [/]

input[data-task="/"],
li[data-task="/"] > input,
li[data-task="/"] > p > input, {
	&:checked {
		background-image:none;
		background-color:transparent;
		position:relative;
		overflow:hidden;
		&:after {
			top: 0;
			left: 0;
			content:" ";
			display:block;
			position:absolute;
			background-color:var(--background-modifier-accent);
			width:calc(50% - 0.5px);
			height:100%;
			-webkit-mask-image: none;
		}
	}
}

Things

Distributed under the MIT License

From [[#Minimal]], with additional git icons

Blue Topaz

Distributed under the MIT License

Default checkboxes

With background images

[>] Rescheduled - [>]
[<] Scheduled - [<]
[?] Question - [?]
[!] Important - [!]
[+] Plus - [+]
[-] Cancelled - [-]
["] Quote- ["]
[S] Amount - [S]
[i] Information - [i]
[u] Up - [u]
[d] Down - [d]
[M] Medical - [M]
[t] Clock / Time - [t]
[P] Person - [P]
[L] Translate / Language - [L]
[W] World - [W]
[U] Universe - [U]

input[data-task="“"]:checked,
li[data-task="“"] > input:checked,
li[data-task="“"] > p > input:checked {
	background-color: var(--green); /* not constant */
	background-image: url('data:image/svg+xml,...'); /* not constant */
	
	/* some might also change the following: */
    background-position: 50% 50%;
    border-color: var(--green); /* not constant */
    background-size: 75%; /* not constant */
}

.theme-dark input[data-task="“"]:checked,
.theme-dark li[data-task="“"]>input:checked,
.theme-dark li[data-task="“"]>p>input:checked {
    background-image: url('data:image/svg+xml,...')
}

With mask image

[*] Star - [*]
[l] Location - [l]
[n] Note - [n]
[I] Idea / Light bulb - [I]
[p] Pro - [p]
[c] Con - [c]
[b] Bookmark - [b]
[f] Fire - [f]
[w] Win - [w]
[k] Key - [k]
[r] Rule / Law - [r]
[m] Measurement - [m]
[T] Telephone - [T]
[#] Tags - [#]
[F] Feature - [F]

input[data-task=n]:checked,
li[data-task=n] > input:checked,
li[data-task=n] > p > input:checked {
	cursor: default;
	background-position: center;
	background: none;
	background-color: var(--blue); /* not constant */
	transform: rotate(45deg); /* not constant */
	-webkit-mask-size: 120%; /* not constant */
	-webkit-mask-position: 50% 50%;
	-webkit-mask-image: url("data:image/svg+xml,...");
}

Other method(s)

[/] In Progress - [/]

input[data-task="/"],
li[data-task="/"] > input,
li[data-task="/"] > p > input {
	border-radius: var(--ch-radius);
}
input[data-task="/"]:checked,
li[data-task="/"] > input:checked,
li[data-task="/"] > p > input:checked {
	background-image: none;
}
.theme-light input[data-task="/"]:checked,
.theme-dark input[data-task="/"]:checked,
.theme-light li[data-task="/"] > input:checked,
.theme-dark li[data-task="/"] > input:checked,
.theme-light li[data-task="/"] > p > input:checked,
.theme-dark li[data-task="/"] > p > input:checked {
	background: var(--text-faint);
}

Extend checkbox list

Style Settings Required: Blue Topaz Theme -> 2. Detail settings -> 2.3 Element styles -> 2.3.11 Checkbox -> Extend checkbox list (unavailable)

["] Quote - ["]
[…] Ellipsis - […]
[/] In Progress `- [/]
[.] Dot - [.]
[d] Down - [d]
[u] Up - [u]
[A] (nothing ?) - [A]
[D] Delete - [D]
[￥] Coin - [￥]
[$] Coin - [$]
[*] Star - [*]

body.extend-checkbox-list input[data-task="“"]:checked,
body.extend-checkbox-list li[data-task="“"]>input:checked,
body.extend-checkbox-list li[data-task="“"]>p>input:checked {
  background-color: transparent;
  background-image: url('data:image/svg+xml,...);
}

AnuPpuccin

License: GPL-3.0

With mask image

All checkboxes, except - [/]

.anp-custom-checkboxes [data-task="!"] {
> input[type="checkbox"]:checked,
> p > input[type="checkbox"]:checked,
	&[type="checkbox"]:checked {
		&:after {
			-webkit-mask-image: url("data:image/svg+xml,...");
			-webkit-mask-size: 20%;
		}
		&:before {
			color: var(--checkbox-color);
			margin: 0 3px;
			position: absolute;
			left: calc(var(--checkbox-size) * 1);
			font-weight: bold;
		}
		--checkbox-color: rgb(var(--ctp-yellow));
		--checkbox-color-hover: rgb(var(--ctp-yellow));
	}
}

Other method(s)

[/] In Progress - [/]

.anp-custom-checkboxes [data-task="/"] {
> input[type="checkbox"]:checked,
> p > input[type="checkbox"]:checked,
	&[type="checkbox"]:checked {
		&:after {
			background-color: transparent;
		}
		&:before {
			color: rgb(var(--ctp-subtext0));
			margin: 0 3px;
			position: absolute;
			left: calc(var(--checkbox-size) * 1);
			font-weight: bold;
		}
		--checkbox-color: rgba(var(--ctp-subtext0), 0.3);
		--checkbox-color-hover: rgba(var(--ctp-subtext0), 0.3);
		border-color: rgb(var(--ctp-subtext0)) !important;
	}
}

Sanctum

Distributed under the MIT License

With mask image

All icons

li.is-checked:where(li[data-task='*']) input[type='checkbox'],
.markdown-source-view input[type='checkbox']:where([data-task='*']):checked {
	background-color: transparent;
	border-width: 0;
	pointer-events: none;

	&:hover{
		box-shadow: none;
		border-color: transparent;
		pointer-events: none;
	}
	&::after {
		-webkit-mask-size: 110%;
		pointer-events: none;
		left: 0px;
	}
}

li[data-task='*'] input[type='checkbox']:checked,
input[type='checkbox'][data-task='*'] {
	&::after {
		background-color: var(--yellow);
		-webkit-mask-image: url("data:image/svg+xml,...");
		/* Some icons needs additional properties, such as -webkit-mask-size, top, transform, ... */
	}
}

ITS

License: GPL-2.0

With mask image

All icons

body:not(.alt-chkbx-off) {
    & .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task],
    & .task-list-item.is-checked {
        &:is([data-task=">"]) {
            & :is(.task-list-label, p) > input:is([type=checkbox], [type=checkbox i]):checked,
            & > input:is([type=checkbox], [type=checkbox i]):checked
            {
                background-color: transparent;
                font: var(--its);
                font-family: var(--its);
                font-size: inherit;
                font-weight: 10;
                text-align: center;
                
                border: 0;
                cursor: pointer;
                -webkit-mask-image: unset;//Border Theme Fix
                
                &::after { 
                    background-color: transparent;
                    top: -4px; 
                    left: 0px;
                    -webkit-mask-image: unset;
                }
            }
        }
    }
}

body:not(.alt-chkbx-off) {
@each $checkbox, $set in $checkboxes {
    & .markdown-source-view.mod-cm6 .task-list-item-checkbox[data-task=">"],
    & .task-list-item.is-checked[data-task=">"] > input[type=checkbox]:checked,
    & .task-list-item.is-checked[data-task=">"] p > input[type=checkbox]:checked
    {
        &::after {
            content: "\EC03";
            color: var(--text-normal);
            transform: none;
        }
    }
}

Primary

License: GPL-3.0

With mask image

All checkboxes, except - [/]

input[type=checkbox]:checked {
    border-color: var(--checked-border-color);
}

input[type=checkbox]:checked:hover {
	border-color: var(--checked-border-color-hover);
}

input[type=checkbox]:checked[data-task=">"]:hover {
	box-shadow: none;
}

li[data-task=">"] input[type=checkbox]:checked:hover {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

input[type=checkbox]:checked[data-task=">"],
li[data-task=">"] > input:checked,
li[data-task=">"] > p > input:checked {
    background-color: transparent;
    border-color: transparent;
    
    &:after {
        background-color: var(--resched-chbx-color);
        -webkit-mask-position: 50% 50%;
        -webkit-mask-size: 110%;
        -webkit-mask-image:url("data:image/svg+xml,...");
    }
}

Other method(s)

[/] In Progress - [/]

input[type=checkbox]:checked[data-task="/"],
li[data-task="/"] > input:checked,
li[data-task="/"] > p > input:checked {
    background: linear-gradient(to right, var(--inprogress-chbx-color) 50%, var(--checklist-bg) 50%);
    background-repeat: no-repeat;
    background-clip: padding-box;
    border-color: var(--inprogress-chbx-border-color);
    
    &:after {
        background-color: transparent;
        -webkit-mask-image: none;
    }

    &:hover {
        background: linear-gradient(to right, var(--inprogress-chbx-color-hover) 50%, var(--checklist-bg) 50%);
        border-color: var(--inprogress-chbx-border-color);
    }
}

Tokyo Night

Distributed under the MIT License

From [[#Border]]

Border

Distributed under the MIT License

With mask image

All icons

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

input[data-task=">"]:checked,
li[data-task=">"] > input:checked,
li[data-task=">"] > p > input:checked {
    --checkbox-color-hover: var(--color-pink);
    color: var(--color-pink);
    -webkit-mask-image: url('data:image/svg+xml,...');
}

Spectrum (Unmaintained Pre-1.0 Release)

Distributed under the MIT License

With background image

All icons

.view-content ul > li.task-list-item.is-checked {
	text-decoration: none;
}

.view-content .task-list-item-checkbox {
	appearance: none;
	box-sizing: border-box;
	border: 1px solid var(--text-muted);
	border-radius: var(--size-0-5);
	position: relative;
	width: 1.5em;
	height: 1.5em;
	margin: 0;
	outline: none;
	margin-right: var(--size-1);
	margin-bottom: var(--size-0-5);
	cursor: pointer;
	filter: none;
	top: var(--size-1-5);
}

.markdown-source-view.mod-cm6 .task-list-item-checkbox {
	vertical-align: baseline;
}

.view-content .task-list-item-checkbox:checked {
	border: none;
	background-color: var(--main-node);
}

.view-content li,
.view-content .HyperMD-list-line {
	.task-list-item-checkbox:checked::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		
		width: 100%;
		height: 100%;
		line-height: 0;
		font-size: 1.5rem;
		color: black;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		background-image: url("data:image/svg+xml,...");
	}
	.task-list-item-checkbox:checked::after {
		display: none;
	}

}

.view-content li[data-task='>'] .task-list-item-checkbox:checked::before,
.view-content .task-list-item-checkbox[data-task='>']:checked::before {
  background-image: url("data:image/svg+xml,...");
}

Cyber Glow

Distributed under the MIT License

With mask image

All icons

.markdown-preview-view .task-list-item-checkbox {
	border: 1px solid var(--text-accent);
	box-shadow: 0 0 0.5em var(--text-accent);
}
.CG-custom-checkbox .view-content .task-list-item-checkbox {
	appearance: none;
	scale: 1.22;
}
.CG-custom-checkbox input[type='checkbox']:checked:after {
	background-color: black;
}

.CG-custom-checkbox .task-list-item-checkbox[data-task='>'],
.CG-custom-checkbox ul > li.task-list-item[data-task='>'] .task-list-item-checkbox {
	background-color: skyblue;
	border: 1px solid skyblue;
    box-shadow: 0 0 5px skyblue, 0 0 10px skyblue, 0 0 15px skyblue;
}
.CG-custom-checkbox .task-list-item-checkbox[data-task='>']:hover,
.CG-custom-checkbox ul > li.task-list-item[data-task='>'] .task-list-item-checkbox:hover {
	background-color: rgb(112, 174, 198);
	border: 1px solid rgb(112, 174, 198);
}
.CG-custom-checkbox [data-task='>'] input[type='checkbox']:checked:after,
.CG-custom-checkbox [data-task='>'][type='checkbox']:checked:after {
	-webkit-mask-image: url('data:image/svg+xml,...');
	-webkit-mask-size: 100%;
}

LYT Mode

Distributed under the MIT License

With mask image

All checkboxes, except - [/]

input[data-task]:checked,
li[data-task] > input:checked {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--border-900);
}

/* All of them, except [ ], ["x"] and [">"] */
input[type=checkbox][data-task]:is([data-task="?"]):checked:after,
.markdown-preview-view li:is([data-task="?"]) input[type=checkbox].task-list-item-checkbox:checked:after {
    display: none;
}

input[data-task="?"]:checked,
li[data-task="?"] > input:checked {
    border: none;
    box-shadow: none;
    cursor: default;

    -webkit-mask-size: var(--font-text-size);
    -webkit-mask-position: 50% 50%;
    
    background-color: var(--color-green-700);
    -webkit-mask-image: url("data:image/svg+xml,...");
}

Other method(s)

[/] Incomplete - [/]

input[data-task="/"]:checked,
li[data-task="/"] > input:checked {
    cursor: default;
    
    background-position: center;
    background-size: 100%;
    background: linear-gradient(to left, var(--background-primary) 50%, var(--background-modifier-border) 50%);
}

Shiba Inu

Distributed under the MIT License

With mask image

All icons

.custom-checkboxes [data-task=">"] input[type=checkbox]:checked,
.custom-checkboxes [data-task=">"][type=checkbox]:checked, {
    --checkbox-color: transparent;
    --checkbox-color-hover: transparent;
    border-width: 0
}

/* ::before never rendered because no content */
.custom-checkboxes [data-task=">"] input[type=checkbox]:checked:before,
.custom-checkboxes [data-task=">"][type=checkbox]:checked:before {
    color: rgb(var(--cyan));
    margin: 0 3px;
    position: absolute;
    left: calc(var(--checkbox-size) * 1);
    font-weight: 700
}

.custom-checkboxes [data-task=">"] input[type=checkbox]:checked:after,
.custom-checkboxes [data-task=">"][type=checkbox]:checked:after {
    -webkit-mask-image: url("data:image/svg+xml,...");
    -webkit-mask-size: contain;
    background-color: rgb(var(--cyan));
    left: 0
}

PLN

Distributed under the GPL-3.0 License

With mask image

All icons

input[type=checkbox][data-task=">"],
ul > li.task-list-item[data-task=">"] > .task-list-item-checkbox {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}
input[type=checkbox][data-task=">"]:checked:after,
ul > li.task-list-item[data-task=">"] > .task-list-item-checkbox:checked:after {
    -webkit-mask-image: url("data:image/svg+xml;...");
}

Obsidianotion

Distributed under the Unlicense License

From [[#Minimal]]

With content

[s] Thread? / String? - [s]

input[data-task='s']:checked:before,
li[data-task='s'] > input:checked:before,
li[data-task='s'] > p > input:checked:before {
  content: "🧵";
  font-size: 0.9rem;
}

input[data-task='s']:checked,
li[data-task='s'] > input:checked,
li[data-task='s'] > p > input:checked {
  --checkbox-marker-color: transparent;
  background-color: transparent;
  border-color: transparent;
}

Maple

Distributed under the MIT License

From [[#Border]]

EbullientWorks

Distributed under the CC0-1.0 License

With content

All icons except - [/]

div[data-task] > label.task-list-label,
ul > li.task-list-item,
ul > li.task-list-item > p  {
	color: var(--text-normal);
	font-weight: unset;
	text-decoration: unset;

	> input.task-list-item-checkbox[type=checkbox]:not(:checked) {
		background-color: unset;
		background: unset;
	}
}

div[data-task=">"] > label.task-list-label,
li.task-list-item[data-task=">"],
li.task-list-item[data-task=">"] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] {
    --checkbox-color: var(--checkbox-deferred);
    --checkbox-border-color: var(--checkbox-deferred);
    --checkbox-marker-color: transparent;
}

input[type=checkbox][data-task="#{$character}"]:checked,
li[data-task="#{$character}"] > input[type=checkbox]:checked,
li[data-task="#{$character}"] > p > input[type=checkbox]:checked {
    background-color: unset;
    background: unset;

    &::after {
		transform: none;
		-webkit-mask-image: none;
		background: unset;
		position: absolute;
		text-align: center;
		font-weight: var(--font-normal);
		font-size: calc(var(--checkbox-size) - 2px);
		font-family: var(--font-monospace);
		line-height: var(--checkbox-size);
		left: 50%;
		margin-left: calc(-1 * (var(--checkbox-size) / 2));
		color: var(--checkbox-color);
		content: '>';
		display: block;
    }
}

Other method(s)

[/] Incomplete - [/]

div[data-task="/"] > label.task-list-label,
li.task-list-item[data-task="/"],
li.task-list-item[data-task="/"] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] {
	--checkbox-color: var(--checkbox-in-progress);
	--checkbox-border-color: var(--checkbox-in-progress);
	--checkbox-marker-color: transparent;
}
	
input[data-task="#{$character}"]:checked,
li[data-task="#{$character}"] > input[type=checkbox]:checked,
li[data-task="#{$character}"] > p > input[type=checkbox]:checked {
	background: linear-gradient(135deg, transparent 50%, var(--checkbox-in-progress) 50%);
	
	&:after {
		transform: none;
		-webkit-mask-image: none;
		background: unset;
		content: ' ';
	}
}

Pine Forest Berry

Distributed under the MIT License

Based on an old version of [[#Minimal]], but not working anymore.

Aura

Distributed under the GPL-2.0 License

With mask image

All icons

.aura-custom-checkbox .task-list-item-checkbox[data-task=">"],
.aura-custom-checkbox
	ul
	> li.task-list-item[data-task=">"]
	.task-list-item-checkbox {
	background-color: rgb(var(--cpt-blue));
	border: 1px solid rgb(var(--cpt-blue));
}
.aura-custom-checkbox .task-list-item-checkbox[data-task=">"]:hover,
.aura-custom-checkbox
	ul
	> li.task-list-item[data-task=">"]
	.task-list-item-checkbox:hover {
	background-color: rgba(var(--cpt-blue), 0.7);
	border: 1px solid rgba(var(--cpt-blue), 0.7);
}
.aura-custom-checkbox [data-task=">"] input[type="checkbox"]:checked:after,
.aura-custom-checkbox [data-task=">"][type="checkbox"]:checked:after {
	-webkit-mask-image: url("data:image/svg+xml,...");
	-webkit-mask-size: 50%;
}

Vicious

Distributed under the MIT License

With mask image

All icons

[data-task=">"] > input[type="checkbox"]:checked,
[data-task=">"] > p > input[type="checkbox"]:checked,
[data-task=">"][type="checkbox"]:checked {
	--checkbox-color: transparent;
	--checkbox-color-hover: transparent;
	/* Only [x] and [-] have a colored background */
}

[data-task=">"] > input[type="checkbox"]:checked:after,
[data-task=">"] > p > input[type="checkbox"]:checked:after,
[data-task=">"][type="checkbox"]:checked:after {
	background: var(--C001);
	-webkit-mask-size: 100%;
	-webkit-mask-image: url("data:image/svg+xml,...");
}

Simple

Distributed under the Unlicense License

From [[#Minimal]]

Elegance

Distributed under the MIT License

From [[#Minimal]]

Material Ocean

Distributed under the MIT License

With mask image

[-] Cancelled - [-]

body.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="-"]:checked,
body.is-mobile.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="-"]:checked,
body.theme-dark .markdown-rendered .task-list-item[data-task="-"] input[type="checkbox"]:checked,
body.is-mobile.theme-dark .markdown-rendered .task-list-item[data-task="-"] input[type="checkbox"]:checked {
	background-color: var(--text-muted);
	-webkit-mask-image: var(--lucide-minus);
	-webkit-mask-size: cover;
}
body.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="-"]:checked:after,
body.is-mobile.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="-"]:checked:after,
body.theme-dark .markdown-rendered .task-list-item[data-task="-"] input[type="checkbox"]:checked:after,
body.is-mobile.theme-dark .markdown-rendered .task-list-item[data-task="-"] input[type="checkbox"]:checked:after {
	background: transparent;
}

Other method(s)

[/] Incomplete - [/]

body.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="/"]:checked,
body.is-mobile.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="/"]:checked,
body.theme-dark .markdown-rendered .task-list-item[data-task="/"] input[type="checkbox"]:checked,
body.is-mobile.theme-dark .markdown-rendered .task-list-item[data-task="/"] input[type="checkbox"]:checked {
	background-color: transparent;
	overflow: hidden;
}
body.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="/"]:checked:after,
body.is-mobile.theme-dark .HyperMD-task-line .task-list-item-checkbox[data-task="/"]:checked:after,
body.theme-dark .markdown-rendered .task-list-item[data-task="/"] input[type="checkbox"]:checked:after,
body.is-mobile.theme-dark .markdown-rendered .task-list-item[data-task="/"] input[type="checkbox"]:checked:after {
	-webkit-mask-image: none;
	background-color: var(--checkbox-color);
	width: 50%;
}

Sparkling Night

Distributed under the MIT License

With background color

All icons

.HyperMD-task-line[data-task=">"] .task-list-item-checkbox::after {
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
}
.HyperMD-task-line[data-task=">"] .task-list-item-checkbox,
.HyperMD-task-line[data-task=">"] .task-list-item-checkbox:hover {
	background-color: var(--bright-green);
	border-color: var(--checkbox-border-color);
}

Kakano

Distributed under the MIT License

With mask image

All icons

/* Complete states (with background) */
input.task-list-item-checkbox[data-task=">"]:checked,
li[data-task=">"] > input:checked,
li[data-task=">"] > p > input:checked {
	background-image: none;
	border-color: var(--theme-color-controlContentArea);
	position: relative;
	overflow: hidden;
	background-color: var(--theme-color-controlContentArea);
	color: white;
}

input[data-task=">"]:checked:after,
li[data-task=">"] > input:checked:after,
li[data-task=">"] > p > input:checked:after {
	content: "";
	top: -1px;
	left: -1px;
	position: absolute;
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	display: block;
	background-color: var(--checkbox-marker-color);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-image: url('data:image/svg+xml; utf8, ...');
}

/* Incomplete states (no background) */
input.task-list-item-checkbox[data-task="!"]:checked
li[data-task="!"] > input:checked
li[data-task="!"] > p > input:checked{
	background-image: none;
	background-color: transparent;
	position: relative;
	overflow: hidden;
}
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, ...');
}

Neo

Distributed under the MIT License

With mask image

All icons except progress

input[data-task=">"]:checked,
li[data-task=">"] > input:checked,
li[data-task=">"] > p > input:checked {
	--checkbox-marker-color: transparent;
	--checkbox-image: none;
	--checkbox-position: 50% 50%;
	
	border: none;
	border-radius: 0;
	background-image: none;
	background-color: currentColor;
	mask-size: var(--checkbox-icon);
	-webkit-mask-size: var(--checkbox-icon);
	mask-position: var(--checkbox-image);
	-webkit-mask-position: var(--checkbox-image);
	mask-image: var(--checkbox-image);
	-webkit-mask-image: var(--checkbox-image);
	
	/* variation part */
	color: var(--color-green);
	--checkbox-image: url('data:image/svg+xml, ...');
}

Other method(s)

[0] Progress 0 - [0]
[1] Progress 1 - [1]
[2] Progress 2 - [2]
[3] Progress 3 - [3]
[4] Progress 4 - [4]

input[data-task="0"]:checked,
li[data-task="0"] > input:checked,
li[data-task="0"] > p > input:checked {
	background: transparent;
	background-image: none;
	width: var(--checkbox-progress-width);
	height: 14px;
	border: 2px solid var(--interactive-accent);
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	mask-image: none;
	-webkit-mask-image: none;
}
	
input[data-task="0"]:checked:hover,
li[data-task="0"] > input:checked:hover,
li[data-task="0"] > p > input:checked:hover {
	background-color: transparent;
}

input[data-task="0"]:checked:hover::after,
li[data-task="0"] > input:checked:hover::after,
li[data-task="0"] > p > input:checked:hover::after {
	background: var(--interactive-accent-hover);
}
	
input[data-task="0"]:checked::after,
li[data-task="0"] > input:checked::after,
li[data-task="0"] > p > input:checked::after {
	content: " ";
	display: block;
	background: var(--interactive-accent);
	width: calc(var(--checkbox-progress-width) * var(--checkbox-progress-frac));
	height: 100%;
	top: 0;
	border-radius: 10px;
	mask-image: none;
	-webkit-mask-image: none;
	transition: width 0.15s ease-out;
}

input[data-task="0"],
li[data-task="0"] {
	--checkbox-progress-frac: 0;
}

Feather

Distributed under the MIT License

From [[#Things]], which is from [[#Minimal]]

Listive

Distributed under the MIT License

With mask image

[>] Defer / Reschedule - [>]
[-] Cancelled - [-]
[<] Schedule / Meeting - [<]
[I] Idea / Light Bulb - [I]
[i] Info - [i]
[!] Warning - [!]
[*] Star / Favourites - [*]

input[data-task=">"]:checked,
li[data-task=">"] > input:checked,
li[data-task=">"] > p > input:checked {
	--checkbox-marker-color: transparent;
	background-color: currentColor;
	color: var(--text-faint);
	transform: rotate(90deg);
	-webkit-mask-position: 50% 100%;
	-webkit-mask-image: url("data:image/svg+xml, ...");
}

With content

["] Citation, my version - ["]
[r] Reference - [r]

input[type=checkbox][data-task="“"]:is(*,:hover,:active),
li[data-task="“"] > input:checked,
li[data-task="“"] > p > input:checked {
	background-color: transparent;
}

input[type=checkbox][data-task="“"]:checked::after,
li[data-task="“"] > input:checked::after,
li[data-task="“"] > p > input:checked::after {
	content: "❝";
	font-size: 1.6em;
	text-align: center;
	top: -5px;
	left: 0;
	color: rgba(var(--callout-quote), 1);
	background-color: transparent;
	-webkit-mask-image: revert;
}

Other method(s)

[/] Partial / Incomplete - [/]

.HyperMD-list-line input[data-task="/"]:checked,
.markdown-preview-view li[data-task="/"]>input[type="checkbox"]:checked {
	background-image: linear-gradient(135deg, var(--interactive-accent) 50%, var(--background-primary) 50%);
}

input[data-task="/"]:checked:after,
li[data-task="/"] > input:checked:after,
li[data-task="/"] > p > input:checked:after {
	background-color: var(--background-modifier-accent);
	-webkit-mask-image: none;
}

MagicUser

Distributed under the MIT License

With content

All icons

input[data-task=">"]:checked,
li[data-task=">"]>input:checked,
li[data-task=">"]>p>input:checked {
	--checkbox-color-hover: transparent;
	--checkbox-color: transparent;
	border-width: 0;
}

input[data-task=">"]:checked::after,
li[data-task=">"]>input:checked::after,
li[data-task=">"]>p>input:checked::after {
	content: url("data:image/svg+xml, ...);
	vertical-align: middle;
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	zoom: 100%;
	-webkit-mask-image: none;
	mask-image: none;
}

Qlean

Distributed under the MIT License

With mask image

All icons

.markdown-source-view.is-live-preview .HyperMD-task-line[data-task="!"] .task-list-item-checkbox,
.markdown-rendered .task-list-item[data-task="!"] > p .task-list-item-checkbox,
.style-settings-container .task-list-item[data-task="!"] > p .task-list-item-checkbox,
.markdown-rendered .task-list-item[data-task="!"] > .task-list-item-checkbox,
.style-settings-container .task-list-item[data-task="!"] > .task-list-item-checkbox {
	border-color: var(--color-warning);
	background-color: var(--color-warning);
}
.markdown-source-view.is-live-preview .HyperMD-task-line[data-task="!"] .task-list-item-checkbox:after,
.markdown-rendered .task-list-item[data-task="!"] > p .task-list-item-checkbox:after,
.style-settings-container .task-list-item[data-task="!"] > p .task-list-item-checkbox:after,
.markdown-rendered .task-list-item[data-task="!"] > .task-list-item-checkbox:after,
.style-settings-container .task-list-item[data-task="!"] > .task-list-item-checkbox:after {
	-webkit-mask-image: url('data:image/svg+xml;charset=utf8, ...');
	mask-image: url('data:image/svg+xml;charset=utf8, ...');
}

Yue

Distributed under the MIT License

From [[#Minimal]]

sQdthOne

Distributed under the GPL-3.0 License

With mask image

All icons

input[data-task=">"]:checked,
li[data-task=">"] > input:checked,
li[data-task=">"] > p > input:checked {
	  --checkbox-marker-color: transparent;
	border: none;
	border-radius: 0;
	background-image: none;
	background-color: currentColor;
	-webkit-mask-size: calc(var(--size-icon) * 1.1);
	-webkit-mask-position: 50% 50%;
	
	background-color: var(--text-faint);
	-webkit-mask-image: url("data:image/svg+xml, ...);
}

input[data-task=">"]:checked:hover,
li[data-task=">"]>input:checked:hover,
li[data-task=">"]>p>input:checked:hover {
	--checkbox-marker-color: transparent;
	border: none;
	border-radius: 0;
	background-image: none;
	background-color: hsl(var(--color-hovered));
	-webkit-mask-size: calc(var(--size-icon) * 1.1);
	-webkit-mask-position: 50% 50%;
}

Dracula Plus

Distributed under the MIT License

From [[#Things]]* , which is from [[#Minimal]].

[t] Time - [t] * This one is unique, but follow the same pattern

Solitude

Distributed under the MIT License

With content

All icons

.HyperMD-task-line[data-task=A] .task-list-item-checkbox,
.HyperMD-task-line[data-task=A] .task-list-item-checkbox:hover {
	background-color: var(--color-red);
	border-color: var(--color-red);
}

.HyperMD-task-line[data-task=A] .task-list-item-checkbox::after {
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
	top: 1px;
	left: 3px;
	position: relative;
}

Prime

Distributed under the GPL-3.0 License

From [[#Minimal]] and [[#Things]], with additional icons

Sanctum Reborn

Distributed under the MIT License

From [[#Sanctum]]

Underwater

Distributed under the MIT License

With mask image

All icons

input[data-task="!"]:checked,
li[data-task="!"] > input:checked,
li[data-task="!"] > p > input:checked {
	--checkbox-marker-color: transparent;
	border: none;
	border-radius: 0px;
	background-color: currentColor;
	background-image: none;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	
	color: var(--color-red);
	-webkit-mask-image: url('data:image/svg+xml, ...');
	mask-image: url('data:image/svg+xml, ...');
}

Nightingale

Distributed under the MIT License

With mask image

All icons

input[data-task='>']:checked,
li[data-task='>']>input:checked,
li[data-task='>']>p>input:checked {
    --checkbox-marker-color: transparent;
    border: 0.5px solid var(--text-faint);
    border-radius: 2px 2px 2px 2px;
    padding: 0;
    margin: 0;
    background-image: none;
    background-color: currentColor;
    
    border: none;
    color: var(--text-accent);
    transform: scale(1.1);
    -webkit-mask-image: url("data:image/svg+xml, ...");
}

Reshi

Distributed under the GPL-3.0 License

With mask image

All icons

.theme-light 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;
}

.theme-light 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, ...");
	-webkit-mask-size: 100%;
    background-color: var(--green-04);
}

.theme-dark 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;
}

.theme-dark 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, ...");
	-webkit-mask-size: 100%;
    background-color: var(--green-11);
    left: 0;
}

Shade Sanctuary

Distributed under the MIT License

From [[#Minimal]] (and probably [[#Things]]).

Sparkling Day

Distributed under the MIT License

Same as [[#Sparkling Night]]

Oreo

Distributed under the GPL-3.0 License

From [[#Minimal]] and [[#Things]].

Gummy Revived

Distributed under the MIT License

With mask image

All icons

li.is-checked:where(li[data-task=">"]) input[type="checkbox"],
.markdown-source-view input[type="checkbox"]:where(li[data-task=">"]):checked {
	background: transparent;
	border-width: 0;
	pointer-events: none;
}

li.is-checked:where(li[data-task=">"]) input[type="checkbox"]:hover,
.markdown-source-view input[type="checkbox"]:where(li[data-task=">"]):checked:hover {
	box-shadow: none;
	border-color: transparent;
	pointer-events: none;
}

li.is-checked:where(li[data-task=">"]) input[type="checkbox"]::after,
.markdown-source-view input[type="checkbox"]:where(li[data-task=">"]):checked::after {
	left: 0;
	-webkit-mask-size: 110%;
	pointer-events: none;
}

li[data-task=">"] input[type="checkbox"]:checked::after,
input[type="checkbox"][data-task=">"]::after {
	background: var(--color-orange);
	-webkit-mask-image: url("data:image/svg+xml, ...");
}

Lorens

Distributed under the MIT License

From [[#Border]]

Phoenix (snippet)

Distributed under the MIT License

With content

All icons except - [/]

input.task-list-item-checkbox {
	-webkit-appearance: none;
	box-sizing: border-box;
	border: 1px solid var(--text-faint);
	border-radius: 50%;
	cursor: pointer;
	width: 21px;
	height: 21px;
	filter: none; /* this is very important, otherwise colors will display incorrectly */
	display: inline-block;
}

input[type=checkbox]:checked:after {
	background-color: transparent;
}

input[data-task='>'].task-list-item-checkbox:checked,
.markdown-preview-view li[data-task='>'] > .task-list-item-checkbox:checked {
	border: none;
	background-color: var(--base-color);
}

.markdown-source-view.mod-cm6 .task-list-item-checkbox[data-task=">"]::before,
.markdown-preview-view li[data-task=">"] > .task-list-item-checkbox:checked::before,
.cm-embed-block .callout .callout-content li[data-task=">"] > .task-list-item-checkbox:checked::before {
	font-family: "remixicon";
	content: "\ea6e"; /* ri-arrow-right-s-line */
	color: white;
	position: absolute;
	transform: scale(1.6) translate(20%, 1.5pt);
}

Other method(s)

[/] Half Done Task (no strikethrough in preview)

.markdown-preview-view li[data-task="/"]>.task-list-item-checkbox:checked,
.markdown-source-view.mod-cm6 .task-list-item-checkbox[data-task="/"],
.cm-embed-block .callout .callout-content li[data-task="/"]>.task-list-item-checkbox:checked {
    background-color: transparent;
    border-color: var(--text-faint) !important;
}

.markdown-preview-view li[data-task="/"]>.task-list-item-checkbox:checked.task-list-item-checkbox:checked::before {
	content: ' ';
	position: absolute;
	top: 1%;
	left: -21%;
	height: 0.8em;
	width: 1.55em;
	border-radius: 150px 150px 0 0;
	background-color: var(--base-color) !important;
	transform: rotate(-45deg);
}

.markdown-source-view.mod-cm6 .task-list-item-checkbox[data-task="/"]::before,
.cm-embed-block .callout .callout-content li[data-task="/"]>.task-list-item-checkbox:checked::before {
	content: ' ';
	position: absolute;
	height: 0.8em;
	width: 1.55em;
	border-radius: 150px 150px 0 0;
	background-color: var(--base-color);
	transform: translate(-21%, 8%) rotate(-45deg);
}

	`-webkit-mask-image`	`background-image`	`content`	`background-color`	Special `- [/]`	Special progress
[[#Minimal]]	1	1			1
[[#Things]]	1	1			1
[[#Blue Topaz]]	1	1			1
[[#AnuPpuccin]]	1				1
[[#Sanctum]]	1
[[#ITS]]	1
[[#Primary]]	1				1
[[#Tokyo Night]]	1
[[#Border]]	1
[[#Spectrum]]		1
[[#Cyber Glow]]	1
[[#LYT Mode]]	1				1
[[#Shiba Inu]]	1
[[#PLN]]	1
[[#Obsidianotion]]	1	1			1
[[#Maple]]	1
[[#EbullientWorks]]			1		1
[[#Pine Forest Berry]]	1	1			1
[[#Aura]]	1
[[#Vicious]]	1
[[#Simple]]	1	1			1
[[#Elegance]]	1	1			1
[[#Material Ocean]]	1				1
[[#Sparkling Night]]				1
[[#Kakano]]	1
[[#Neo]]	1					1
[[#Feather]]	1	1			1
[[#Listive]]	1		1
[[#MagicUser]]			1
[[#Qlean]]	1
[[#Yue]]	1	1			1
[[#sQdthOne]]	1
[[#Dracula Plus]]	1	1			1
[[#Solitude]]			1
[[#Prime]]	1	1			1
[[#Sanctum Reborn]]	1
[[#Underwater]]	1
[[#Nightingale]]	1
[[#Reshi]]	1
[[#Shade Sanctuary]]	1	1			1
[[#Sparkling Day]]				1
[[#Oreo]]	1	1			1
[[#Gummy Revived]]	1
[[#Lorens]]	1
[[#Phoenix (snippet)]]			1		1

Files

05 CSS Code Review.md

Latest commit

History

05 CSS Code Review.md

File metadata and controls

Minimal

With mask image

With background image

Other method(s)

Things

Blue Topaz

Default checkboxes

With background images

With mask image

Other method(s)

Extend checkbox list

AnuPpuccin

With mask image

Other method(s)

Sanctum

With mask image

ITS

With mask image

Primary

With mask image

Other method(s)

Tokyo Night

Border

With mask image

Spectrum (Unmaintained Pre-1.0 Release)

With background image

Cyber Glow

With mask image

LYT Mode

With mask image

Other method(s)

Shiba Inu

With mask image

PLN

With mask image

Obsidianotion

With content

Maple

EbullientWorks

With content

Other method(s)

Pine Forest Berry

Aura

With mask image

Vicious

With mask image

Simple

Elegance

Material Ocean

With mask image

Other method(s)

Sparkling Night

With background color

Kakano

With mask image

Neo

With mask image

Other method(s)

Feather

Listive

With mask image

With content

Other method(s)

MagicUser

With content

Qlean

With mask image

Yue

sQdthOne

With mask image

Dracula Plus

Solitude

With content

Prime