Custom Checkbox implementation for Simple Form

checkbox.input.scss

div.input.checkbox {
  label.custom {
    input[type=checkbox] {
      position: absolute; left: -10000px; opacity: 0;
    }
    span.tick {
      display: inline-block; width: 17px; height: 17px;
      position: relative; top: 4px;
      border: 1px solid $color-border; border-radius: 3px;
      background-color: #fff;
      margin-right: 5px;
      > span {
        display: inline-block;
        position: absolute; top: 3px; left: 2px;
        width: 11px; height: 9px;
        background: image-url('icons.png') -220px -100px no-repeat;
        opacity: 0;
        @include transform(scale(0));
        @include transition-property(transform, opacity);
        @include transition-duration(.2s);
      }
    }
    &.checked {
      span.tick > span {
        opacity: 1;
        @include transform(scale(1));
      }
    }
  }
}

checkbox_input.rb

# Based On
# https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/inputs/boolean_input.rb
# should be placed in app/inputs

class CheckboxInput < SimpleForm::Inputs::BooleanInput
  def input
    if nested_boolean_style?
      build_hidden_field_for_checkbox +
        template.label_tag(nil, class: classes) {
          build_check_box_without_hidden_field + check_box_replacement + inline_label
        }
    else
      build_check_box
    end
  end

  def check_box_replacement
    template.content_tag(:span, class: 'tick') do
      template.content_tag(:span)
    end
  end

  def classes
    classes = ['checkbox', 'custom']
    classes << 'checked' if checked?
    classes.join(' ')
  end

  def checked?
    object.send(attribute_name).present?
  end
end

form.rb

= simple_form_for Checkbox do |f|
  = f.input :show_password, as: :checkbox, inline_label: 'show password', label: false, required: false