Find file
Fetching contributors…
Cannot retrieve contributors at this time
120 lines (96 sloc) 2.42 KB
<!DOCTYPE html>
<html lang="en">
<meta charset=utf-8>
<title>prettyCheckbox.js Example</title>
<style type="text/css" media="screen">
/* Example Page Styles */
html, body, div, span, p, a, label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
font-family: sans-serif;
vertical-align: baseline;
body {
color: #333;
font-family: sans-serif;
font-size: 14px;
margin: 30px;
p { position: relative; margin-bottom: 5px; }
label {
cursor: pointer;
position: absolute;
top: 4px;
left: 33px;
/* Pretty Checkboxes */
.prettyCheckbox {
background: #efefef;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
height: 20px;
width: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
.prettyCheckbox.checked { position: relative; }
.prettyCheckbox.checked .check {
background: url('img/checkmark.png') no-repeat;
display: inline-block;
height: 16px;
width: 16px;
position: absolute;
top: 2px;
left: 2px;
z-index: 100;
/* An example of a custom class prettyCheckbox */
.darkCheckbox {
background: #999;
border: 3px solid #555;
cursor: pointer;
display: inline-block;
height: 18px;
width: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
-ms-border-radius: 18px;
-o-border-radius: 18px;
border-radius: 18px;
.darkCheckbox .checked { font-size: 16px; text-align: center; }
.darkCheckbox.checked .check { display: block; text-align: center; }
.darkCheckbox.checked .check:after { color: white; font-weight: bold; content: 'x'; }
<h1>Example Checkboxes:</h1>
<input type="checkbox" id="example1" checked="checked">
<label>Hey, I'm a Checkbox!</label>
<input type="checkbox" id="example2">
<label>Look, another one!</label>
<script src=""></script>
<script src="prettyCheckbox.min.js"></script>
$(document).ready(function() {
$("#example2").prettyCheckbox({ 'class' : 'darkCheckbox' }); // overwrite the class