Oh my (customized) checkbox

index.haml

%h3 no-style checkbox
%label
  %input(type="checkbox")
  %span click-me

%h3 with custom css
%label.my-checkbox
  %input(type="checkbox")
  %span click-me

index.html

<h3>our custom css</h3>
<label class='my-checkbox'>
  <input type='checkbox'>
  <span>click-me</span>
</label>

<h3>no-style checkbox</h3>
<label>
  <input type='checkbox'>
  <span>click-me</span>
</label>

Oh my (customized) checkbox.markdown

Oh my (customized) checkbox

A customized checkbox with a standard layout (input nested inside label). Use scss variables to customize.

A Pen by tomp on CodePen.

License.

style.scss

// customize look-n-feel
$primary-color: black;
$background-color: white;
$size: 17px;
$icon-size: 10px;
$border-radius: 4px;
$checkbox-text-margin: 7px;
.my-checkbox {
  position: relative;
  height: $size;
  line-height: $size;
  display: block;
  cursor: pointer;
  // native input is visualy hidden
  input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  // our custom checkbox
  $content-offset: ($size - $icon-size) / 2;
  span:before {
    content: '✔';
    padding-left: $content-offset;
    display: inline-block;
    height: $size;
    width: $size - $content-offset;
    border: 1px solid $primary-color;
    border-radius: $border-radius;
    font-size: $icon-size;
    margin-right: $checkbox-text-margin;
  }
  //----------------------------------*\
  // Checkbox states (checked/unchecked; hover:none)
  //----------------------------------*/
  input + span:before {
    color: $background-color;
    background-color: $background-color;
  }
  input:hover + span:before {
    color: $primary-color;
    background-color: $primary-color;
  }
  input:checked + span:before {
    color: $background-color;
    background-color: $primary-color;
  }
  input:checked:hover + span:before {
    color: $primary-color;
    background-color: $background-color;
  }
}