I’ve been working on building a re-usable Sass framework for quite some time now as an alternative to the Bootstrap templates. One of the most challenging pieces to get right (off the bat) is styling custom native elements. Not only do they not want to be styled, they’ll do almost everything to stick it to you and ignore everything you throw at it. However,¬†after compiling a few different articles from other CSS guru’s I’ve put together my own spin. Usually I would do an all CSS solution, but dealing with pseudo elements can sometimes get a bit gnarly and fickle when dealing with such small pixel dimensions. I’ve therefore opted for a CSS + image sprite hybrid. Check it out!

The output

Custom CSS3 Checkbox with SASS

The HTML

<div class="form-checkbox">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Shawn Carter</label>
</div>
<div class="form-checkbox">
  <input type="checkbox" id="checkbox2" checked="checked">
  <label for="checkbox2">Beyonce Knowles</label>
</div>
<div class="form-checkbox">
  <input type="checkbox" id="checkbox3" checked="checked" disabled="disabled">
  <label for="checkbox3">Christopher Wallace</label>
</div>
<div class="form-checkbox">
  <input type="checkbox" id="checkbox4" disabled="disabled">
  <label for="checkbox4">Tupac Shakur</label>
</div>

The SASS

$checkbox-width:      18px;

input[type=checkbox]{
  position: absolute;
  left: -9999px;

  &+ label{
    position: relative;
    display: block;
    padding: 6px 10px 6px ($checkbox-width + 10);
    cursor: pointer;

    // Checkbox setup
    &:before{
      display: block;
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      margin: (-$checkbox-width/2) 0 0;
      width: $checkbox-width;
      height: $checkbox-width;
      background-image: url(../img/app-icons.png);
      background-repeat: no-repeat;
      @include background-size(72px);
    }
  }

  // Disabled
  &:disabled{
    &+ label{
      cursor: not-allowed;

      &:before{
        background-position: (-$checkbox-width*2) 0;
      }
    }

    // Disabled checked
    &:checked + label{
      &:before{
        background-position: (-$checkbox-width*3) 0;
      }
    }
  }

  // Checked
  &:checked + label{
    &:before{
      background-position: -$checkbox-width 0;
    }
  }
}
The end. But not really...