custom-checkbox-radio-scss

Custom Checkbox Radio SCSS

SCSS based custom checkboxes and radios; a CSS-only solution.

View the Demo

Install

npm i --save custom-checkbox-radio-scss

Include

Depending on your current directory and frontend stack, you'll want something along the lines of one of:

@import '../node_modules/custom-checkbox-radio-scss/custom-checkbox-radio';
@import '~custom-checkbox-radio-scss/custom-checkbox-radio'; // (webpack 3)

Add

Note, your labels must proceed the inputs and all have suitable name/id/for attributes.

<fieldset>
  <legend>Checkboxes</legend>
  <p class="checkbox">
    <input type="checkbox" name="lorem-1" id="lorem-1">
    <label for="lorem-1">Lorem</label>
  </p>
  <p class="checkbox">
    <input type="checkbox" name="lorem-2" id="lorem-2">
    <label for="lorem-2">Ipsum</label>
  </p>
</fieldset>

<fieldset>
  <legend>Radios</legend>
  <p class="radio">
    <input type="radio" name="ipsum" id="ipsum-1" checked>
    <label for="ipsum-1">Lorem</label>
  </p>
  <p class="radio">
    <input type="radio" name="ipsum" id="ipsum-2">
    <label for="ipsum-2">Ipsum</label>
  </p>
</fieldset>

Customise

Written in a non-invasive kinda way, so you can add your own styles to, say, input[type="radio"] + label::after, or simply override the various variables set in the SCSS file.

Browser Support

IE9 +