Yes No Toggle
HTML
<form class="jsonForm">
<div id="wrapper-for-toggle" class="jf-row jf-input-type-checkbox">
<label for="toggle">Does Marcellus Wallace look like a bitch?</label>
<div class="onoffswitch input-wrapper">
<input id="toggle" type="checkbox" name="accepted" title="Please indicate your accepance." data-apply-method="onoffswitch" data-toggle-value-on="Yup" data-toggle-value-off="Nope" value="" class="onoffswitch-checkbox" /><label class="onoffswitch-label" id="toggle1" ><span class="onoffswitch-inner"><em class="ison">Yes!</em><em class="isoff">No.</em></span><span class="onoffswitch-switch"></span></label>
</div>
</div>
</form>
CSS
.jsonForm .onoffswitch {
position: relative; width:92px!important;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.jsonForm .onoffswitch-checkbox {
display: none;
}
.jsonForm label.focb{display:none;}
.jsonForm .onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border:1px solid #999999; border-radius: 3px;
}
.jsonForm .onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.jsonForm .onoffswitch .ison, .jsonForm .onoffswitch .isoff {
display: block; float: left; width: 50%; height:26px; padding: 0; line-height: 26px;
font-size: 1em; color: white; font-weight: bold; font-style:normal;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
box-shadow:0 2px 4px -2px rgba(0,0,0,.3) inset
}
.jsonForm .onoffswitch .ison{
padding-right: 36px;
background-color: #68CF48; color: #FFFFFF;
text-align: center;
}
.jsonForm .onoffswitch .isoff {
padding-left: 36px;
background-color: #C2C2C2; color: #FFFFFF;
text-align: center;
}
.jsonForm .onoffswitch-switch {
display: block; width: 36px; margin: 0px;
background: #FFFFFF;
border:1px solid #999999; border-radius: 3px;
position: absolute; top:0px; bottom:0px; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.jsonForm .onoffswitch-switch:after {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 16px;
width: 8px;
margin: auto;
border: 0px solid #ddd;
border-width: 0 2px;
color: rgb(204, 204, 204);
}
.jsonForm .onoffswitch-checkbox:checked + .onoffswitch-label...