Custom CSS: Customizing checkboxes

Marked supports GitHub-style checkboxes in lists using the syntax:

 - [ ] Unchecked item
 - [x] Checked item

To enable this, turn on Preferences->Processor->Render GitHub checkboxes.

Checkboxes will be rendered in standard GitHub formatting, but you can customize them with CSS (either in a custom style or in Preferences->Style->Additional CSS). Here's an example for creating image-based checkboxes.

#wrapper .task-list .task-list-item input[type=checkbox] {
    overflow: visible;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    position: absolute;
    margin-left: -2em;
}

#wrapper .task-list .task-list-item input[type=checkbox]:checked:before {
    background-position: 0 -15px;
}

#wrapper .task-list .task-list-item input[type=checkbox]:before {
    content: ' ';
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(http://csscheckbox.com/checkboxes/dark-plus-cyan.png);
    position: absolute;
}