Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
120 lines (96 sloc) 2.42 KB
<!DOCTYPE html>
<html lang="en">
<head>
<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'; }
</style>
</head>
<body>
<h1>Example Checkboxes:</h1>
<p>
<input type="checkbox" id="example1" checked="checked">
<label>Hey, I'm a Checkbox!</label>
</p>
<p>
<input type="checkbox" id="example2">
<label>Look, another one!</label>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="prettyCheckbox.min.js"></script>
<script>
$(document).ready(function() {
$("#example1").prettyCheckbox();
$("#example2").prettyCheckbox({ 'class' : 'darkCheckbox' }); // overwrite the class
});
</script>
</body>
</html>