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 +
