Custom checkboxes and radio buttons with haml and sass. For more, see http://github.com/matthewcopeland/sassy-seeds

0_checkbox_radio.haml

%fieldset
  %span.checkbox-wrapper
    %input{ :type=>"checkbox" }
    %span
  %label A Checkbox

%fieldset
  %span.checkbox-wrapper
    %input{ :type=>"checkbox", :checked=>"checked" }
    %span
  %label A Checked Checkbox

2_base_text_input.scss

$text-input-padding: 5px 10px;
$text-input-border-radius: $border-radius;
$text-input-box-shadow: inset 0 1px 3px 0 rgba(0,0,0, 0.3), 0 1px 2px 0 rgba(255,255,255, .2);

@mixin text-input-style {
  display: inline-block;
  padding: $text-input-padding;
  text-align: left;
  vertical-align: middle;
  border: $text-input-border;
  @include border-radius( $text-input-border-radius );
  background: $text-input-bg;
  @include box-shadow( $text-input-box-shadow );
  @include transition( background .3s );
  &:focus { background: $text-input-bg-focus; }
}//@mixin

2_checkbox_radio_mixin.scss

//--------------------------------
// apply to any wrapper class
// follow the input with a blank span.
//
$checkbox-wrapper-z-stack-reset: 0;
$checkbox-z: 2;
$checkbox-span-z: 1;
$checkbox-size: 1.5em;

@mixin checkbox-wrapper-style {
  position: relative;
  height: $checkbox-size;
  width: $checkbox-size;
  display: inline-block;
  vertical-align: middle;
  z-index: $checkbox-wrapper-z-stack-reset;
  cursor: pointer;

  + label {
    line-height: $checkbox-size;
    vertical-align: middle;
   }

  input {
    opacity: 0;
    @include fill( absolute );
    z-index: $checkbox-z;

    & + span {
      @include fill( absolute );
      z-index: $checkbox-span-z;
      @include text-input-style;
      padding: 0;

      &:before {
        content: "";
        @include fill( absolute );
        text-align: center;
        z-index: 1;
        line-height: $checkbox-size;
        vertical-align: middle;
      }//&:before
    }//+span

    &[type=checkbox]:checked + span:before {
      content: "#{$checkmark-unicode}";
    }//&:check+span:before

    //-----------------------------------
    //radios
    &[type=radio] {
      + span { @include border-radius( $checkbox-size/2 ); }
      &:checked + span:before { content: "#{$radio-circle-unicode}"; }
    }//&[type=radio]

  }//input
}//@mixin

3_checkbox_radio_implementation.scss

.checkbox-wrapper, .radio-wrapper { 
  @include checkbox-wrapper-style; 
}