Customizable checkboxes
npm install checkboxesA 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. š¤Æ
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!
Add this line to HTML file
```
ā
Install checkboxes package using npm
``
npm i checkboxes
then \
add this line to index.js
``
require('checkboxes');
OR \
add this line to HTML file
``
ā
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.
`-- css
.
|-- LICENSE
|-- README.md
|-- dist
|
| -- checkboxes.min.css-- src
|-- gulpfile.js
|-- package-lock.json
|-- package.json
|-- 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