https://github.com/orbitbot/skeleton-checkboxes
Checkboxes for Skeleton CSS
https://github.com/orbitbot/skeleton-checkboxes
Last synced: 8 months ago
JSON representation
Checkboxes for Skeleton CSS
- Host: GitHub
- URL: https://github.com/orbitbot/skeleton-checkboxes
- Owner: orbitbot
- License: isc
- Created: 2016-03-14T20:43:37.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-29T15:56:48.000Z (about 10 years ago)
- Last Synced: 2025-10-17T19:12:00.334Z (8 months ago)
- Language: CSS
- Size: 395 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# skeleton-checkboxes
> Checkboxes for Skeleton CSS
Fairly simple checkbox styles for [Skeleton CSS](http://skeleton-framework.github.io/), inspired by Material Design.
[Demo](http://orbitbot.github.io/skeleton-checkboxes/)
Available on bower and npm with
```bash
$ 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
```html
```
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:
```css
input[type="checkbox"]:checked.pink + label {
background-color: #ff5891;
border: 1px solid #ff5891;
}
```
Add the matching `class` attribute to the `` element, fe. ``.
Possible future efforts
-----------------------
- evaluate focos effects (zoom?)