Checkboxes

A library for customizable checkboxes ✅

Background

Different browsers have different implementations for checkboxes:

See this post about not able to style checkboxes. 😭

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. 🤯

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. 🙌

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

Getting Started

Using CDN

Add this line to HTML file

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/css/checkboxes.min.css">

✅

Using NPM

Install checkboxes package using npm

npm i checkboxes

then add this line to index.js

require('checkboxes');

OR add this line to HTML file

<link rel="stylesheet" type="text/css" href="checkboxes/dist/css/checkboxes.min.css">

✅

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

<input type="checkbox">

<input type="checkbox" class="checkbox"
style="--size: {NUMBER}px; --radius: {NUMBER}px; --bg: #{RRGGBB}; --color: #{RRGGBB}; --time: {NUMBER}s;" {checked}>

e.g.

<input type="checkbox" class="checkbox"
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