<div class="wrap">
<h1>Custom CSS Checkbox</h1>

<ul>
  <li>
    <label for="one" class="group-checkbox">
      <input type="checkbox" name="one" id="one" />
      <i></i>
    </label>
    Drink a beer.
  </li>
  <li>
    <label for="two" class="group-checkbox">
      <input type="checkbox" name="two" id="two" />
      <i></i>
    </label>
    Code a mobile app.
  </li>
  <li class="checked">
    <label for="three" class="group-checkbox">
      <input type="checkbox" name="three" id="three" checked />
      <i></i>
    </label>
    Design a mobile app.
  </li>
  <li class="checked">
    <label for="four" class="group-checkbox">
      <input type="checkbox" name="four" id="four" checked />
      <i></i>
    </label>
    Study HTML and CSS.
  </li>
</ul>
</div>

* { margin: 0; padding: 0; }

body { 
  margin: 40px 0; 
  font: bold 100% Arial;
  background: #ebe6df; 
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 25px;
}

ul { 
  max-width: 320px;
}

ul li { list-style-type: none; }

ul li + li {
  padding-top: 15px;
}

.group-checkbox {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  cursor: pointer;
}

.group-checkbox i {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #cacaca;
  border-radius: 50%;
}

.group-checkbox input {
  position: absolute;
  top: 0; left: 0;
  margin: 0;
  opacity: 0;
  z-index: -1;
}

.group-checkbox input:checked ~ i:after {
  content: '\2713';
  position: absolute;
  top: 4px; left: 3px;
  font-size: 15px;
  font-weight: bold;
  line-height: 15px;
  color: #ff9900;
}

.group-checkbox input:checked ~ i {
  border-color: #ff9900;
}

.checked {
  position: relative;
  color: #ff9900;
  text-decoration: line-through;
}

// Just for "line through" effect on tasks title.

$('input[type="checkbox"]').on('change', function(){
  $(this).closest('li').toggleClass('checked');
});