Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



42 Commits

Repository files navigation


A library for customizable checkboxes ✅

👉 Website Demo


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

Using CDN

Add this line to HTML file

<link rel="stylesheet" type="text/css" href="">

Using NPM

Install checkboxes package using npm

npm i checkboxes

add this line to index.js


add this line to HTML file

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


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


<input type="checkbox">


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


<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

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


  • Yifan Ai - Initial work

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


This project is licensed under the MIT License