Checkboxes http://sassmeister.com/gist/bce9c7de03395d70658f

SassMeister-input-HTML.html

<ul>
  <li>
    <label>
      <input class="checkbox checkbox_l" type="checkbox" checked="checked">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
  <li>
    <label>
      <input class="checkbox" type="checkbox">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
  <li>
    <label>
      <input class="checkbox" type="checkbox" checked="checked">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
  <li>
    <label>
      <input class="checkbox" type="checkbox">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----


/*
*/

.checkbox {
  opacity: 0;
  position: absolute;

  & + .icon_checkbox {
    background: #fff;
    border: 1px solid #ccc;
    color: green;
    content: " ";
    display: inline-block;
    margin-right: 0.3rem;
    height: 1.1rem;
    position: relative;
    top: 0.15rem;
    width: 1.1rem;

    &:before {
      left: 0;
      font-size: 1em;
      height: 1em;
      position: absolute;
      text-align: center;
      top: 0;
      width: 1em;
    }
  }

  // larger checkbox
  &.checkbox_l + .icon_checkbox {
    height: 1.5em;
    top: 0;
    width: 1.5em;
  }
  &.checkbox_l + .icon_checkbox:before {
    font-size: 1.5em;
    height: 1em;
    line-height: 1.2;
    text-align: center;
    width: 1em;
  }

  &:hover + .icon_checkbox,
  &:checked + .icon_checkbox {
    &:before {
      content: 'x';
    }
  }
  &:hover + .icon_checkbox:before {
    opacity: 0.2;
  }
  &:hover:checked + .icon_checkbox:before {
    opacity: 1;
  }
  &:checked + .icon_checkbox { color: green; }
}

SassMeister-output.css

/*
*/
.checkbox {
  opacity: 0;
  position: absolute;
}
.checkbox + .icon_checkbox {
  background: #fff;
  border: 1px solid #ccc;
  color: green;
  content: " ";
  display: inline-block;
  margin-right: 0.3rem;
  height: 1.1rem;
  position: relative;
  top: 0.15rem;
  width: 1.1rem;
}
.checkbox + .icon_checkbox:before {
  left: 0;
  font-size: 1em;
  height: 1em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1em;
}
.checkbox.checkbox_l + .icon_checkbox {
  height: 1.5em;
  top: 0;
  width: 1.5em;
}
.checkbox.checkbox_l + .icon_checkbox:before {
  font-size: 1.5em;
  height: 1em;
  line-height: 1.2;
  text-align: center;
  width: 1em;
}
.checkbox:hover + .icon_checkbox:before, .checkbox:checked + .icon_checkbox:before {
  content: 'x';
}
.checkbox:hover + .icon_checkbox:before {
  opacity: 0.2;
}
.checkbox:hover:checked + .icon_checkbox:before {
  opacity: 1;
}
.checkbox:checked + .icon_checkbox {
  color: green;
}

SassMeister-rendered.html

<ul>
  <li>
    <label>
      <input class="checkbox checkbox_l" type="checkbox" checked="checked">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
  <li>
    <label>
      <input class="checkbox" type="checkbox">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
  <li>
    <label>
      <input class="checkbox" type="checkbox" checked="checked">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
  <li>
    <label>
      <input class="checkbox" type="checkbox">
      <span class="icon_checkbox"></span>Label
    </label>
  </li>
</ul>