form-js
Version:
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
62 lines (51 loc) • 1.32 kB
HTML
<html>
<head>
<style>
/* input field versions of toggles */
input {
display: none;
}
/* the toggle containers */
.toggle {
width: 20px;
height: 20px;
background: grey;
display: inline-block;
cursor: pointer;
}
/* 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 radio button toggle</label>
<input type="radio" value="MD" name="state" />
<input type="radio" value="VA" name="state" />
<input type="radio" value="DC" name="state" />
<script src="../dist/form.js"></script>
<script>
var toggle = new Form.Radios({
inputs: document.getElementsByTagName('input'),
containerClass: 'toggle',
inputClass: 'toggle-input',
selectedClass: 'toggle-clicked'
});
// select third toggle on load
toggle.select(2);
</script>
</body>
</html>