jQuery plugin for checkbox replacement through css
JavaScript
Pull request Compare This branch is 2 commits ahead of JustinGillespie:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
.gitignore
README.md
example.html
prettyCheckbox.css
prettyCheckbox.js
prettyCheckbox.min.js

README.md

jQuery Pretty Checkbox

prettyCheckbox.js is a small jQuery plugin for checkbox replacement through CSS.

$(document).ready(function() {
    $(".myCheckbox").prettyCheckbox();
});

or to apply it to all checkboxes as a global style:

$("input[type=checkbox]").prettyCheckbox();

See a basic usage example here: http://demo.justingillespie.com/prettyCheckbox/

Usage

References

First include jQuery on your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>

Include prettyCheckbox.js

<script src="prettyCheckbox.js" charset="utf-8"></script>

Styling

prettyCheckbox.js will give you CSS classes to work with to easily customize a checkboxes.

.prettyCheckbox {
    /* The default look of a checkbox */
}

.prettyCheckbox.checked {
    /* The look of the checkbox when it's checked */
}

.prettyCheckbox.checked .check {
    /* The checkbox image icon or text */
}

Options

Options are typically passed to the init as a parameter.

$("input[type=checkbox]").prettyCheckbox({ 'class' : 'myCustomClass' });

class

Change the class of the provided replacement checkbox element. This is also useful for styling checkboxes on the same page differently.

$(".myCheckBox").prettyCheckbox({ 'class' : 'myCustomClass' });
.myCustomClass { /* The default look of a checkbox */ }
.myCustomClass.checked { /* The look of the checkbox when it's checked */ }
.myCustomClass.checked .check { /* The checkbox image icon or text */ }

Demo

Live Demo: http://demo.justingillespie.com/prettyCheckbox/

License

Copyright (c) 2011-2012 Justin Gillespie licensed under the Apache 2.0 License.