Add ability to style checkboxes in "to-do list"

[philipbeber]

Test case

See this plunkr: http://next.plnkr.co/edit/xUli1OLfkmpI0nvE?preview

Check the checkbox above firepad. Notice how it has custom styling.

Create a to-do list. Notice how the checkboxes have the default browser styling.

Expected behavior

Firepad creates checkboxes in the form <span ...><input type="checkbox"...>. However to style a checkbox using CSS they have to be in the form:

<label>
  <input type='checkbox'>
  <span></span>
</label>

Actual behavior

There is no way to style Firepad checkboxes using CSS

[dacuoi]

You can download and style in codemirror.css file. This is my code for Safari browser:

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(119, 119, 119, .6);
    border-radius: 3px;
    background-color: #eee;
    vertical-align: bottom;
    margin-right: 5px;
}
input[type="checkbox"]:active {
    background-color: #0080FF;
}
input[type="checkbox"]:checked {
    background-image: url("ic_checklists.png");
    background-size: contain;
    background-color: #0080FF;
    border: 0px solid #fff;
}