Styled Ember checkboxes

some-component.js

isSomething: Ember.computed.alias('model.something'), // boolean

actions: {
  checkSomething() {
    this.toggleProperty('model.something');
  },
}

some-template.hbs

<input type="checkbox" checked={{isSomething}} onclick={{action "checkSomething"}} id="{{concat 'check-something-' model.id}}" />
<label class="{{if isSomething 'selected'}}" for="{{concat 'check-something-' model.id}}"><span>Label!</span></label>

style.scss

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  cursor: pointer;
  position: relative; // so absolute positioning of :before & :after elements works
  padding-right: 10px;

  span {
    padding-left: 20px; // to get out from under :before & :after
  }
}

input[type="checkbox"] + label:before {
  position: absolute;
  content: '\00a0'; // ASCII empty checkbox
  display: inline-block;
  width: 13px;
  height: 12px;
  font-size: 13px;
  font-family: 'Arial Unicode MS'; // for access to extended characters
  background-color: #ccc;
  border: 1px solid #333;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  top: 1px;
}

input[type="checkbox"]:checked + label:after {
  position: absolute;
  content: '\2715'; // nice mathy 'x'
  color: #333;
  left: 2px;
  font-size: 13px;
  top: 1px;
}