Generated by SassMeister.com.

Pretty Radios & Checkboxes.md

Requires CSS Browser Selector to disable on IE8 and Android

SassMeister-input-HTML.html

<div class="container">
  <form class="form">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
        <span>Option one is this and that&mdash;be sure to include why it's great</span>
      </label>
    </div>
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        <span>Option two is disabled</span>
      </label>
    </div>
    
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        <span>Option one is this and that&mdash;be sure to include why it's great</span>
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        <span>Option two can be something else and selecting it will deselect option one</span>
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        <span>Option three is disabled</span>
      </label>
    </div>
  </form>

</div><!-- /.container -->

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

//== Pretty Radios & Checkboxes
//
//## Requires [CSS Browser Selector](https://github.com/crucifyer/css-browser-selector) to disable on IE8 and Android


// Bootstrap Variables
$brand-success: #5cb85c;
$input-border: #ccc;
$text-muted: lighten(#000, 46.7%);

// Custom Variables
$font-weight-normal: normal;

// Wrap in some class so we ony style the elements we want to
.form {
  .checkbox,
  .radio {
    font-size: 1em;
    cursor: pointer;
    label {
      padding-left: 0;
    }
    // We need to wrap the text in a span tag so we can determine if it is next to a :checked input
    span {
      font-weight: $font-weight-normal;
      position: relative;
      display: block;
      padding-left: 2em;
      &:before {
        position: absolute;
        top: 3px;
        left: 0;
        display: inline-block;
        width: 1em;
        height: 1em;
        font-weight: bold;
        line-height: 1em;
        color: $brand-success;
        text-align: center;
        content: '';
        background-color: #fff;
        box-shadow: 0 0 0 1px $input-border;
        box-shadow: 0 0 0 1px $input-border,
                    inset 0 0 0 3px #fff;

        -webkit-font-smoothing: antialiased;
      }
    }
  }

  // Make radios a circle
  .radio span:before {
    border-radius: 50%;
  }
  
  // Disabled state
  .checkbox.disabled span,
  fieldset[disabled] .checkbox span,
  .radio.disabled span,
  fieldset[disabled] .radio span {
    color: $text-muted;
    &:before {
      box-shadow: 0 0 0 1px lighten($input-border, 12%);
    }
  }
  
  // Checked state
  .checkbox input[type='checkbox'],
  .radio input[type='radio'] {
    display: none;
    &:checked ~ span:before {
      background-color: $brand-success;
    }
  }
}

// Reset on IE8 and Android
.ie8,
.android {
  .checkbox,
  .radio {
    margin-left: 20px;
    span {
      padding-left: 0;
      &:before {
        display: none;
      }
    }
  }
  .checkbox input[type='checkbox'],
  .radio input[type='radio'] {
    display: block;
  }
}

// Import Bootstrap for the Demo
@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";

SassMeister-output.css

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
.form .checkbox,
.form .radio {
  font-size: 1em;
  cursor: pointer;
}

.form .checkbox label,
.form .radio label {
  padding-left: 0;
}

.form .checkbox span,
.form .radio span {
  font-weight: normal;
  position: relative;
  display: block;
  padding-left: 2em;
}

.form .checkbox span:before,
.form .radio span:before {
  position: absolute;
  top: 3px;
  left: 0;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-weight: bold;
  line-height: 1em;
  color: #5cb85c;
  text-align: center;
  content: '';
  background-color: #fff;
  box-shadow: 0 0 0 1px #ccc;
  box-shadow: 0 0 0 1px #ccc, inset 0 0 0 3px #fff;
  -webkit-font-smoothing: antialiased;
}

.form .radio span:before {
  border-radius: 50%;
}

.form .checkbox.disabled span,
.form fieldset[disabled] .checkbox span,
.form .radio.disabled span,
.form fieldset[disabled] .radio span {
  color: #777777;
}

.form .checkbox.disabled span:before,
.form fieldset[disabled] .checkbox span:before,
.form .radio.disabled span:before,
.form fieldset[disabled] .radio span:before {
  box-shadow: 0 0 0 1px #ebebeb;
}

.form .checkbox input[type='checkbox'],
.form .radio input[type='radio'] {
  display: none;
}

.form .checkbox input[type='checkbox']:checked ~ span:before,
.form .radio input[type='radio']:checked ~ span:before {
  background-color: #5cb85c;
}

.ie8 .checkbox,
.ie8 .radio,
.android .checkbox,
.android .radio {
  margin-left: 20px;
}

.ie8 .checkbox span,
.ie8 .radio span,
.android .checkbox span,
.android .radio span {
  padding-left: 0;
}

.ie8 .checkbox span:before,
.ie8 .radio span:before,
.android .checkbox span:before,
.android .radio span:before {
  display: none;
}

.ie8 .checkbox input[type='checkbox'],
.ie8 .radio input[type='radio'],
.android .checkbox input[type='checkbox'],
.android .radio input[type='radio'] {
  display: block;
}

SassMeister-rendered.html

<div class="container">
  <form class="form">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
        <span>Option one is this and that&mdash;be sure to include why it's great</span>
      </label>
    </div>
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        <span>Option two is disabled</span>
      </label>
    </div>
    
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        <span>Option one is this and that&mdash;be sure to include why it's great</span>
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        <span>Option two can be something else and selecting it will deselect option one</span>
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        <span>Option three is disabled</span>
      </label>
    </div>
  </form>

</div><!-- /.container -->