Checkboxes

A library for customizable checkboxes ✅

👉 Website Demo

Background

Different browsers have different implementations for checkboxes:

See this post about not able to style checkboxes. 😭

!checkbox on Safari
!checkbox on Chrome
!checkbox on Firefox
!checkbox on Opera
!checkbox on Edge

Chrome uses the thick white tick, while Safari, Opera, Edge and Firefox all use the thin white tick. 😢

In addition, Safari, Opera and Edge use user's preferred Accent colour (from System Preferences on a Mac) as background for the checkboxes, whereas Chrome and Firefox stick with blue background. 🤯

!macOS System Preferences

These checkboxes by browsers are styled by User Agent style sheets and they can not be overridden easily. 😕 \
Thus, these checkboxes can hardly match the logo and theme colour of a website or a system! 😩

After some work, I successfully styled the checkboxes for our company's website. 😀 \
See my reflection tweet.

I would like to style them with ease in the future and for everyone, hence the creation of this small side project. 🙌

!checkboxes demo

There are now a couple of customizable options for the checkboxes. And many more to come!

Getting Started

$3

Add this line to HTML file

``

`

✅

$3

Install checkboxes package using npm

`
npm i checkboxes
`

then \
add this line to index.js

`
require('checkboxes');
`

OR \
add this line to HTML file

`

`

✅

Usage

Add "checkbox" class to the checkbox input. \
(Optionally, add custom styles to the element to change it from the default styles.)

i.e. \
from

`

`

to

`
style="--size: {NUMBER}px; --radius: {NUMBER}px; --bg: #{RRGGBB}; --color: #{RRGGBB}; --time: {NUMBER}s;" {checked}>
`

e.g.

`
style="--size: 20px; --radius: 8px; --bg: #000000; --color: #F47A37; --time: 0.4s;">
`

where the default style is
`
input[type='checkbox'].checkbox {
--size: 12px;
--radius: calc(var(--size) / 10);
--bg: red;
--color: white;
--time: 0.5s;
}
`
which can be easily overridden.

Package Structure

`
.
|-- LICENSE
|-- README.md
|-- dist
| -- css
| -- checkboxes.min.css
|-- gulpfile.js
|-- package-lock.json
|-- package.json
-- src
|-- checkboxes.html
-- scss
-- checkboxes.scss
```

Authors

Yifan Ai - Initial work*

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License