## 概要
[[Obsidian]]にはチェックボックス機能はあるが、種類は1つしかない。以下のように、`[ ]`の中に入れるマークによって、チェックボックスの種類を変えたい。
```markdown
- [ ] チェックなし
- [x] チェックあり `[x]`
- [-] チェックあり `[-]`
- [?] チェックあり `[?]`
```
![[Pasted image 20230121155509.png|frame]]
*上記[[Markdown]]を[[Live Preview]]や[[Reading view]]で表示*
## ソリューション
[[CSS]]で表示を変更します。以下の[[Gist]]を使います。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">Gist</span>
</div>
<div class="link-card-v2-title">
Obsidian custom checkbox snippet
</div>
<div class="link-card-v2-content">
Obsidian custom checkbox snippet. GitHub Gist: instantly share code, notes, and snippets.
</div>
<img class="link-card-v2-image" src="https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png" />
<a href="https://gist.github.com/OliverBalfour/b87459fd55cf1f5832a2e0996a6f45a0"></a>
</div>
1点だけ修正します。以下の部分について
```css
/* Hide a weird tick overlay */
input[type=checkbox]:checked::after {
display: none !important;
}
```
このままだとエディタ以外で使われているチェックボックスに影響が出てしまうため、以下のように影響範囲を絞ります。
```css
.HyperMD-list-line input[type=checkbox]:checked::after,
.markdown-preview-view input[type=checkbox]:checked::after {
display: none !important;
}
```
## 参考
私が使っている [[📓チェックボックスの種類と定義]] です。[[CSS]]コードも載せています。