petermac-
9/13/2015 - 9:10 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

SassMeister-rendered.html
content_copyfile_download
<!-- Checkbox -->
<span class="fh-checkbox">
    <input type="checkbox" id="checkbox-id" name="mycheckbox">
    <label for="checkbox-id">My checkbox label</label>
</span>

<!-- Radio -->
<span class="fh-radio">
    <input type="radio" id="radio-id1" name="myradiogroup">
    <label for="radio-id1">My radio label</label>
</span>
<span class="fh-radio">
    <input type="radio" id="radio-id2" name="myradiogroup">
    <label for="radio-id2">My second radio label</label>
</span>
SassMeister-output.css
content_copyfile_download
/**
 * Checkboxes & radios
 */
.fh-checkbox > [type="checkbox"]:checked, .fh-checkbox > [type="checkbox"]:not(:checked),
.fh-radio > [type="radio"]:checked,
.fh-radio > [type="radio"]:not(:checked) {
  width: 0;
  height: 0;
  display: none;
  opacity: 0;
}
.fh-checkbox > [type="checkbox"]:checked + label, .fh-checkbox > [type="checkbox"]:not(:checked) + label,
.fh-radio > [type="radio"]:checked + label,
.fh-radio > [type="radio"]:not(:checked) + label {
  display: inline-block;
  margin-right: 7px;
  margin-top: 7px;
  margin-bottom: 7px;
  padding-left: 22px;
  padding-top: 2px;
  position: relative;
  cursor: pointer;
}
.fh-checkbox > [type="checkbox"]:checked + label:before, .fh-checkbox > [type="checkbox"]:not(:checked) + label:before,
.fh-radio > [type="radio"]:checked + label:before,
.fh-radio > [type="radio"]:not(:checked) + label:before {
  position: absolute;
  display: inline-block;
  bottom: 1px;
  left: 0;
  width: 13px;
  height: 13px;
  border: 2px solid #849FBB;
  color: #849FBB;
}
.fh-checkbox > [type="checkbox"]:checked + label:hover:before, .fh-checkbox > [type="checkbox"]:not(:checked) + label:hover:before,
.fh-radio > [type="radio"]:checked + label:hover:before,
.fh-radio > [type="radio"]:not(:checked) + label:hover:before {
  background-color: #849FBB;
}
.fh-checkbox > [type="checkbox"]:checked:focus + label:before, .fh-checkbox > [type="checkbox"]:not(:checked):focus + label:before,
.fh-radio > [type="radio"]:checked:focus + label:before,
.fh-radio > [type="radio"]:not(:checked):focus + label:before {
  border-color: #6FB5FB;
  box-shadow: 0 0 6px 0 #6FB5FB;
}
.fh-checkbox > [type="checkbox"]:checked[disabled] + label, .fh-checkbox > [type="checkbox"]:not(:checked)[disabled] + label,
.fh-radio > [type="radio"]:checked[disabled] + label,
.fh-radio > [type="radio"]:not(:checked)[disabled] + label {
  cursor: not-allowed;
  opacity: .4;
}
.fh-checkbox > [type="checkbox"]:checked[disabled] + label:before, .fh-checkbox > [type="checkbox"]:not(:checked)[disabled] + label:before,
.fh-radio > [type="radio"]:checked[disabled] + label:before,
.fh-radio > [type="radio"]:not(:checked)[disabled] + label:before {
  opacity: .7;
}

.fh-checkbox > [type="checkbox"]:checked + label:before,
.fh-checkbox > [type="checkbox"]:not(:checked) + label:before {
  font-family: "FontAwesome";
  font-size: 13px;
  text-align: center;
  -webkit-transition: border-color .2s ease-in, background-color .2s ease-in;
  -moz-transition: border-color .2s ease-in, background-color .2s ease-in;
  -o-transition: border-color .2s ease-in, background-color .2s ease-in;
  -ms-transition: border-color .2s ease-in, background-color .2s ease-in;
  transition: border-color .2s ease-in, background-color .2s ease-in;
}

.fh-checkbox > [type="checkbox"]:checked + label:before {
  content: "\f00c";
  color: #FFF;
  background-color: #57CB85;
  border-color: #57CB85;
}

.fh-checkbox > [type="checkbox"]:not(:checked) + label:before {
  content: "";
}

.fh-radio > [type="radio"]:checked + label:before,
.fh-radio > [type="radio"]:not(:checked) + label:before {
  content: "";
  border-radius: 15px;
  -webkit-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in, box-shadow .2s ease-in;
  -moz-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
  -o-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
  -ms-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
  transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
}

.fh-radio > [type="radio"]:checked + label:before {
  color: #57CB85;
  border-color: #57CB85;
  background-color: #57CB85;
  box-shadow: inset 0 0 0 1px #fff;
}

.fh-radio > [type="radio"]:not(:checked) + label:before {
  box-shadow: inset 0 0 0 3px #fff;
}

/**
 * On/off switch
 */
.fh-switch {
  position: relative;
}

.fh-switch > [type="checkbox"]:checked,
.fh-switch > [type="checkbox"]:not(:checked) {
  width: 0;
  height: 0;
  display: none;
  opacity: 0;
}
.fh-switch > [type="checkbox"]:checked + label,
.fh-switch > [type="checkbox"]:not(:checked) + label {
  cursor: pointer;
  display: inline-block;
  margin-right: 7px;
  margin-top: 7px;
  margin-bottom: 7px;
  padding-right: 60px;
}
.fh-switch > [type="checkbox"]:checked + label:after,
.fh-switch > [type="checkbox"]:not(:checked) + label:after {
  content: "";
  top: 4px;
  right: 10px;
  width: 30px;
  height: 12px;
  position: absolute;
  border-radius: 30px;
}
.fh-switch > [type="checkbox"]:checked + label + .fh-switch-knob,
.fh-switch > [type="checkbox"]:not(:checked) + label + .fh-switch-knob {
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 30px;
  display: inline-block;
  position: absolute;
  cursor: pointer;
  pointer-events: none;
  box-shadow: 1px 1px 1px #DDDDDD;
  -webkit-transition: right .1s ease-in, background-color .1s ease-in;
  -moz-transition: right .1s ease-in, background-color .1s ease-in;
  -o-transition: right .1s ease-in, background-color .1s ease-in;
  -ms-transition: right .1s ease-in, background-color .1s ease-in;
}
.fh-switch > [type="checkbox"]:checked:focus + label:after, .fh-switch > [type="checkbox"]:checked:focus + label + .fh-switch-knob,
.fh-switch > [type="checkbox"]:not(:checked):focus + label:after,
.fh-switch > [type="checkbox"]:not(:checked):focus + label + .fh-switch-knob {
  box-shadow: 0 0 6px 0 #6FB5FB;
}
.fh-switch > [type="checkbox"]:checked[disabled] + label, .fh-switch > [type="checkbox"]:checked[disabled] + label:after, .fh-switch > [type="checkbox"]:checked[disabled] + label + .fh-switch-knob,
.fh-switch > [type="checkbox"]:not(:checked)[disabled] + label,
.fh-switch > [type="checkbox"]:not(:checked)[disabled] + label:after,
.fh-switch > [type="checkbox"]:not(:checked)[disabled] + label + .fh-switch-knob {
  cursor: not-allowed;
  opacity: 0.4;
}

.fh-switch > [type="checkbox"]:checked + label:after {
  background-color: #9EFFC4;
}

.fh-switch > [type="checkbox"]:not(:checked) + label:after {
  background-color: #DDDDDD;
}

.fh-switch > [type="checkbox"]:checked + label + .fh-switch-knob {
  right: 5px;
  background-color: #57CB85;
}

.fh-switch > [type="checkbox"]:not(:checked) + label + .fh-switch-knob {
  right: 25px;
  background-color: #849FBB;
}
SassMeister-input.scss
content_copyfile_download
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$color-default: #849FBB; // default color
$color-default-light: #DDDDDD; // default color light
$color-active: #57CB85; // color when active or checked
$color-active-light: #9EFFC4; // active color light
$color-focus: #6FB5FB; // color when focused

$margin-el: 7px; // default margin for our custom inputs

/**
 * Checkboxes & radios
 */
.fh-checkbox > [type="checkbox"],
.fh-radio > [type="radio"] {
    &:checked,
    &:not(:checked) {
        width: 0;
        height: 0;
        display: none;
        opacity: 0;
        & + label {
            display: inline-block;
            margin-right: $margin-el;
            margin-top: $margin-el;
            margin-bottom: $margin-el;
            padding-left: 22px;
            padding-top: 2px;
            position: relative;
            cursor: pointer;
            &:before {
                // position elements absolute to parent container
                position: absolute;
                display: inline-block;
                bottom: 1px;
                left: 0;
                width: 13px;
                height: 13px;
                border: 2px solid $color-default;
                color: $color-default;
            }
            &:hover:before {
                // add some hover styling
                background-color: $color-default;
            }
        }
        &:focus + label:before {
            border-color: $color-focus;
            box-shadow: 0 0 6px 0 $color-focus;
        }
        &[disabled] + label {
            cursor: not-allowed;
            opacity: .4;
            &:before {
                opacity: .7;
            }
        }
    }
}
// styling for checkbox for both states
.fh-checkbox > [type="checkbox"]:checked + label:before,
.fh-checkbox > [type="checkbox"]:not(:checked) + label:before {
    // set icon font
    font-family: "FontAwesome";
    font-size: 13px;
    text-align: center;
    // add some CSS3-animations
    -webkit-transition: border-color .2s ease-in, background-color .2s ease-in;
    -moz-transition: border-color .2s ease-in, background-color .2s ease-in;
    -o-transition: border-color .2s ease-in, background-color .2s ease-in;
    -ms-transition: border-color .2s ease-in, background-color .2s ease-in;
    transition: border-color .2s ease-in, background-color .2s ease-in;        
}
// styling for checkbox when selected
.fh-checkbox > [type="checkbox"]:checked + label:before {
    // set checkmark icon
    content: "\f00c";
    color: #FFF;
    background-color: $color-active;
    border-color: $color-active;
}
// styling for checkbox when not selected
.fh-checkbox > [type="checkbox"]:not(:checked) + label:before {
    // remove checkmark icon
    content: "";
}
// styling for radio for both states
.fh-radio > [type="radio"]:checked + label:before,
.fh-radio > [type="radio"]:not(:checked) + label:before, {
    content: "";
    border-radius: 15px;
    // add some CSS3-animations
    -webkit-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in, box-shadow .2s ease-in;
    -moz-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
    -o-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
    -ms-transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
    transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in;
} 
// styling for radio when selected
.fh-radio > [type="radio"]:checked + label:before {
    color: $color-active;
    border-color: $color-active;
    background-color: $color-active;
    // use box-shadow to render circle
    box-shadow: inset 0 0 0 1px #fff;  
}  
// styling for radio when not selected
.fh-radio > [type="radio"]:not(:checked) + label:before {
    box-shadow: inset 0 0 0 3px #fff; 
}
/**
 * On/off switch
 */
.fh-switch {
    position: relative;
}
.fh-switch > [type="checkbox"]:checked,
.fh-switch > [type="checkbox"]:not(:checked) {
    width: 0;
    height: 0;
    display: none;
    opacity: 0;
    & + label {
        cursor: pointer;
        display: inline-block;
        margin-right: $margin-el;
        margin-top: $margin-el;
        margin-bottom: $margin-el;
        // apply padding so the switch fits inside the label
        padding-right: 60px;
        &:after {
            content: "";
            top: 4px;
            right: 10px;
            width: 30px;
            height: 12px;
            // use absolute for better positioning
            position: absolute;
            border-radius: 30px;
        }
        & + .fh-switch-knob {
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 30px;
            display: inline-block;
            position: absolute;
            cursor: pointer;
            pointer-events: none;
            box-shadow: 1px 1px 1px $color-default-light;
            // add some CSS3-animations
            -webkit-transition: right .1s ease-in, background-color .1s ease-in;
            -moz-transition: right .1s ease-in, background-color .1s ease-in;
            -o-transition: right .1s ease-in, background-color .1s ease-in;
            -ms-transition: right .1s ease-in, background-color .1s ease-in;
        }
    }
    &:focus + label:after,
    &:focus + label + .fh-switch-knob {
        box-shadow: 0 0 6px 0 $color-focus;
    }
    &[disabled] {
        & + label,
        & + label:after,
        & + label + .fh-switch-knob {
            cursor: not-allowed;
            opacity: 0.4;
        }
    }
}
.fh-switch > [type="checkbox"]:checked + label:after {
    background-color: $color-active-light;
}
.fh-switch > [type="checkbox"]:not(:checked) + label:after {
    background-color: $color-default-light;
}
.fh-switch > [type="checkbox"]:checked + label + .fh-switch-knob {
    right:5px;
    background-color: $color-active;
}
.fh-switch > [type="checkbox"]:not(:checked) + label + .fh-switch-knob {
    right: 25px;
    background-color: $color-default;
}
SassMeister-input-HTML.html
content_copyfile_download
<!-- Checkbox -->
<span class="fh-checkbox">
    <input type="checkbox" id="checkbox-id" name="mycheckbox">
    <label for="checkbox-id">My checkbox label</label>
</span>

<!-- Radio -->
<span class="fh-radio">
    <input type="radio" id="radio-id1" name="myradiogroup">
    <label for="radio-id1">My radio label</label>
</span>
<span class="fh-radio">
    <input type="radio" id="radio-id2" name="myradiogroup">
    <label for="radio-id2">My second radio label</label>
</span>