custom-checkbox-radio-scss
SCSS based custom checkboxes and radios; a no-JS solution.
Last updated 9 months ago by entozoon .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install custom-checkbox-radio-scss 
SYNC missed versions from official npm registry.

Custom Checkbox Radio SCSS

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

View the Demo

Swanky

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 +

Current Tags

  • 1.9.0                                ...           latest (9 months ago)

30 Versions

  • 1.9.0                                ...           9 months ago
  • 1.8.5                                ...           9 months ago
  • 1.8.4                                ...           9 months ago
  • 1.8.3                                ...           10 months ago
  • 1.8.2                                ...           a year ago
  • 1.8.1                                ...           a year ago
  • 1.8.0                                ...           a year ago
  • 1.7.0                                ...           a year ago
  • 1.6.1                                ...           a year ago
  • 1.6.0                                ...           a year ago
  • 1.5.2                                ...           2 years ago
  • 1.5.1                                ...           2 years ago
  • 1.5.0                                ...           2 years ago
  • 1.4.6                                ...           2 years ago
  • 1.4.5                                ...           2 years ago
  • 1.4.4                                ...           2 years ago
  • 1.4.3                                ...           2 years ago
  • 1.4.2 [deprecated]           ...           2 years ago
  • 1.4.1                                ...           2 years ago
  • 1.4.0                                ...           2 years ago
  • 1.3.2                                ...           2 years ago
  • 1.3.1                                ...           2 years ago
  • 1.3.0                                ...           2 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.4                                ...           3 years ago
  • 1.1.3                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |