M

ALX DESIGN

HOME / UX JAVASCRIPT /

Custom checkbox

If you create beautiful ergonomic forms, you may have encountered the ugliness of checkboxes imposed by browsers: small, unsuitable for your graphic charter, they do not accord with flat designs. This is where I come to the rescue and propose you to test the library of my Custom Checkbox project, which will allow you to transform these awful little boxes into flat shapes with a modern and minimalist design.

Still not convinced? Take a look at this overview:

browsers checkboxes overview
Some of them seem to have not evolved since the 90's and shouldn't be on your website!

Custom checkboxes

I worked on the development of the lightest possible solution while offering flexibility and the possibility of customization.

Since I couldn't deeply modify the checkboxes design imposed by the browsers, I opted to hide them, create more aesthetic fake checkboxes, and to synchronize the check status of these couple of elements.

These fake checkboxes are made of <div> tags, that can be fully customized with a CSS.

You can find below some examples of the Custom checkboxes library usage:

See the Pen Custom checkboxes demo by Alexis Riche (@alexisr) on CodePen.

Info

Clicking on one fake checkbox will trigger the onclick event on the associated hidden original checkbox.

So you won't lose any property of your checkboxes, they will work normally.

You can download it on Github

Let me know here or on Github if this library gave you satisfaction or if anything could be improved.

BACK TO HOME

Leave a comment ?