form-js
Version:
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
74 lines (58 loc) • 1.7 kB
HTML
<html>
<head>
<style>
/* hide the native checkbox, because its not as pretty */
.input-checkbox {
display: none;
}
/* the "un-checked" state of the pretty checkbox */
.my-checkbox {
width: 20px;
height: 20px;
background: grey;
display: inline-block;
}
/* the "checked" state of the pretty checkbox */
.my-checkbox-checked {
position: relative;
}
.my-checkbox-checked:before {
content: "";
position: absolute;
top: 15%;;
left: 15%;
display: block;
background: red;
width: 70%;
height: 70%;
border-radius: 20px;
}
</style>
</head>
<body>
<!-- our starter checkbox html -->
<label>The world's simplest checkbox</label>
<input type="checkbox" class="input-checkbox" value="" name="mycheck" />
<div><strong>Status:</strong> <span id="checked-status-text"></span></div>
<script src="../dist/form.js"></script>
<script>
var statusText = document.getElementById('checked-status-text');
var checkbox = new Form.Checkbox({
el: document.getElementsByClassName('input-checkbox')[0],
containerClass: 'my-checkbox',
inputClass: 'my-checkbox-input',
checkedClass: 'my-checkbox-checked',
onChecked: function () {
statusText.textContent = 'checked';
},
onUnchecked: function () {
statusText.textContent = 'unchecked';
}
});
// check it
checkbox.check();
//un-check it
checkbox.uncheck();
</script>
</body>
</html>