form-js
Version:
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
67 lines (54 loc) • 1.41 kB
HTML
<html>
<head>
<style>
/* the toggle containers */
.toggle {
width: 20px;
height: 20px;
background: grey;
display: inline-block;
cursor: pointer;
}
/* input field versions of toggles */
input {
display: none;
}
/* clicked toggles */
.toggle-clicked {
position: relative;
}
.toggle-clicked:before {
content: "";
position: absolute;
top: 15%;;
left: 15%;
display: block;
background: pink;
width: 70%;
height: 70%;
border-radius: 20px;
}
</style>
</head>
<body>
<!-- our starter html -->
<label>The world's simplest checkboxes</label>
<input type="checkbox" value="MD" name="state" />
<input type="checkbox" value="VA" name="state" />
<input type="checkbox" value="DC" name="state" />
<script src="../dist/form.js"></script>
<script>
var toggle = new Form.Checkboxes({
inputs: document.getElementsByTagName('input'),
containerClass: 'toggle',
inputClass: 'toggle-input',
selectedClass: 'toggle-clicked',
onChange: function () {
console.log(this, arguments);
}
});
// select second toggle on load
toggle.select(1);
</script>
</body>
</html>