# Style checkboxes with emoji

**URL:** <https://forum.obsidian.md/t/style-checkboxes-with-emoji/2244>\
**Category:** Themes & CSS snippets\
**Tags:** custom-css\
**Created:** [June 21, 2020, 5:15am UTC](https://forum.obsidian.md/t/style-checkboxes-with-emoji/2244 "2020-06-21T05:15:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrjackphil](https://forum.obsidian.md/user_avatar/forum.obsidian.md/mrjackphil/32/585_2.png) [@mrjackphil](https://forum.obsidian.md/u/mrjackphil)\
**Post date:** [June 21, 2020, 5:15am UTC](https://forum.obsidian.md/t/style-checkboxes-with-emoji/2244/1 "2020-06-21T05:15:46Z")

</div>

![6d8tFRJ4S6](https://forum.obsidian.md/uploads/default/original/2X/2/24bba715e31cb63e7d609a51b439840f50d5b2c4.gif)

It adds:

- Checkboxes are styles using emoji. You can put your emoji as a content variable. Should work with words if you prefer.
- Black transparent overlay for completed tasks
- Full line clickable TODO toggle behavior in preview mode.

I got an idea when I saw this: [Nicer Checkboxes](https://forum.obsidian.md/t/nicer-checkboxes/2238)

Tested on Windows 10.

Known issues: overlay for DONE tasks doesn’t work with multi-line. Will hover only first line.

```css
.markdown-preview-view .task-list-item-checkbox {
	height: 19px;
}

.task-list-item input {
	visibility: hidden;
}

.task-list-item input:not([checked=true])::after {
  content: "🔲";
  width: 100vw;
  height: 100%;
  position: absolute;
  opacity: 0.5;
  visibility: visible;
  cursor: pointer;
}

.task-list-item input[checked=true]::after {
  content: "✅";
  width: 100vw;
  height: 100%;
  background: black;
  position: absolute;
  opacity: 0.5;
  visibility: visible;
  cursor: pointer;
}

```