Skip to content

Checkboxes ✅ with customisable color, size, border radius and animation time

License

Notifications You must be signed in to change notification settings

yifaneye/checkboxes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Using CDN

Add this line to HTML file

<link rel="stylesheet" type="text/css" href="https://unpkg.com/checkboxes@1.3.3/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">

to

<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

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