skeleton-checkboxes

1.0.2 • Public • Published

skeleton-checkboxes

Checkboxes for Skeleton CSS

Fairly simple checkbox styles for Skeleton CSS, inspired by Material Design.

Demo

Available on bower and npm with

$ npm install skeleton-checkboxes
$ bower install skeleton-checkboxes

Usage

Add the following html for each checkbox to be styled. The ordering of elements is important because of how the CSS selectors are structured

<input type="checkbox" id="my-checkbox">
<label for="my-checkbox"></label>

When using the checkbox styles, if you have a non-white background or for other aesthetic reasons, there might be a need to tune the colors. This can easily be achieved like so:

input[type="checkbox"]:checked.pink + label {
  background-color: #ff5891;
  border: 1px solid #ff5891;
}

Add the matching class attribute to the <input> element, fe. <input type="checkbox" class="pink" id="pink-checkbox">.

Possible future efforts

  • evaluate focos effects (zoom?)

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i skeleton-checkboxes

      Weekly Downloads

      1

      Version

      1.0.2

      License

      ISC

      Last publish

      Collaborators

      • orbitbot