This is mostly in place of a lorem ipsum for now, but basically I grew increasingly bored with the default checkboxes that browsers render (which, as most any Web Developer knows, are practically impossible to style). So, inspired by this, I decided to work on a simple method for replacing the checkboxes with more easily stylizable elements and this is the result.

This is only the first iteration so hopefully there will be easier integration and more customization available in the future.

Usage For basic usage, just download the library and include the Javascript and CSS. Then all you need to do is call stylizedCheckbox('id'); and you now have a beautiful checkbox that works just like a normal one does.

Full example:

Additional Styles The Stylized Checkboxes are created by manipulating the border properties of an empty element. At this time, the easiest way to apply additional styling is just overriding the styling of the elements how you wish:

.emptyCheckbox is the class for the initial basic box. The element always retains this class, even when in another state.
.filledCheckbox is the class for the checkmark.

When you call stylizedCheckbox(id), the stylized checkbox that is generated is given the id of id + 'CheckboxReplacement'. For example, calling stylizedCheckbox('exampleId') will generate a stylized checkbox with the id exampleIdCheckboxReplacement. This allows you to style specific checkboxes without affecting other checkboxes.

Example:

#usageCheckboxCheckboxReplacement.filledCheckbox {
border-color: rgb(199, 16, 229);
height: 10px;
width: 25px;
}


Adding Click Functionality To add additional functionality on click, just pass a function into the stylizedCheckbox function as its second parameter.
Example:

stylizedCheckbox('myCheckbox', function() {
alert('Used awesome checkbox!');
});