I’ve been working on building a re-usable Sass framework for quite some time now as an alternative to the Bootstrap templates.

Revised and updated Nov 2019,also now without the need for an image sprite in v2.0!

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

Here’s what the below markup should produce if you’ve:

  1. Added the HTML code.
  2. Added the Sass code and compiled it.
  3. Downloaded and linked to the app-icons.png file.
Custom CSS3 Checkbox with SASS

The Markup

Copy and paste this example code into your document. For now, you can leave the names and IDs as-is, but once you’re set up you would generate your own code with your own checkboxes :).

<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 Code

Create a new .scss file (such as checkboxes.scss) and copy the Sass into it from below. The sizes and paddings should match up to the same size as most default browser checkbox sizings = great for cross-browser custom CSS checkboxes.

Note: you will also need to download the app-icons.png file, linked below.

// Variables
$checkbox-width: 18px;

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

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

    // Default State
    &: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("https://andycrone.com/media/2015/02/app-icons.png");
      background-repeat: no-repeat;
      background-size: 72px auto;
      -webkit-background-size: 72px auto;
      -moz-background-size: 72px auto;
    }
  }

  // Checked State
  &:checked + label {
    &:before {
      background-position: (-$checkbox-width) 0;
    }
  }

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

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

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

// Extra layout styling
.form-checkbox{
  position: relative;
  display: block;
}

The checkbox icon files

To have custom icons, you need the custom icon file! Attached below are two files, app-icons.png is the default output you’ve already seen (pretty green buttons) and the app-icons.psd is the raw PSD file for you to edit as you please. I apologize, I wrote this article a loooong time ago – I should really have a Sketch App version ;).

That should really be it. Have a go and get in touch if you need any further help – I’m always keen to pass on knowledge!