css checkbox

checkbox.less

input[type="checkbox"].checkbox {
  // basic checkbox style
  display: none !important;
  
  + label {
    cursor: pointer;
    display: inline-block;
  }
  
  // lock style
  &.lock {
    + label {
      padding-left: 48px;
      line-height: 48px;
      
      background: url('http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Lock-Unlock-icon.png')
        no-repeat center left;
    }
    
    &:checked + label {
      background-image: url('http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Lock-Lock-icon.png');
    }
  }
}