Trello Checkbox

checkbox.css

.task .checkbox {
background: white;
border-radius: 3px;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #B9B9B9;
border-bottom-color: #999;
border-top-color: #CCC;
font-weight: bold;
position: absolute;
left: 6px;
line-height: 16px;
overflow: hidden;
text-align: center;
text-indent: 100%;
top: 0;
height: 16px;
width: 16px;
white-space: nowrap;
}

.task.complete .checkbox {
background-color: #F3F3F3;
border: 1px solid #B9B9B9;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
text-indent: 0;
}

.task .checkbox.enabled:hover {
background-color: #DDD;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
color: #939393;
cursor: pointer;
text-indent: 0;
}

checkbox.html

<div class="checkbox enabled">✓</div>

<div class="check-item task">
  <div class="checkbox enabled">✓</div>
  <div class="check_item_text editable" attr="name">
    <p class="current hide-on-edit">Implement new Share Design</p>
    <div class="edit delete convert">
      <input type="text" class="field full single-line">
    </div>
    <p class="edits-warning quiet">
      You have unsaved edits on this field. 
      <a href="#" class="js-view-edits">View edits</a> or <a href="#" class="js-discard-edits">discard</a>.
    </p>
  </div>
</div>