Untitled

dabblet.css

body {
 background: rgb(239, 239, 244);
}

.toggle {
	position: relative;
	display: inline-block;
	font-family: "Helvetica Neue";
	font-size: 10pt;
	border: 1px solid lightgrey;
	margin-top: 20pt;
	padding: 10pt;
	border-radius: 20pt;
	width: 70px;
	white-space: nowrap;
	box-shadow: inset 0 1px 1px white,
				0 1px 1px white;
	background: #f8f8f8;
	background: linear-gradient(to bottom, #f8f8f8 0%,#ffffff 100%);
}

.toggle legend {
	position: absolute;
	top: -20pt;
	left: 0;
	width: 100%;
	text-align: center;
}

.toggle input {
	display: none;
}

.toggle label {
	display: inline-block;
	width: 50%;
	text-align: center;
}

.switch-label {
	transition: .1s color;
	z-index: 1;
}

:checked + .switch-label {
	color: red;
}

.switch-label::before {
	position: absolute;
	display: inline-block;
	content: ' ';
	white-space: pre;
	width: 70px;
	padding: 10pt;
	top: 0px;
	left: 0px;
	border-radius: 40px;
}

:checked + .switch-label-first::before {
	box-shadow: inset 1px 1px 2px white, inset 10px 10px 20px -20px black;
}

:checked + .switch-label-second::before {
	box-shadow: inset -1px 1px 2px white, inset -10px 10px 20px -20px black;
}

/*.switch-label-second::before {
	border: 1px solid transparent;
	box-shadow: 0px 8px 8px black;
}
*/

input:focus {
	outline: none
}

dabblet.html

<fieldset class="toggle">
<legend>Measurements</legend>
<label><input type="radio" name="measurement" value="metric"><span class="switch-label switch-label-first">Metric</span></label>
<label><input type="radio" name="measurement" value="us"><span class="switch-label switch-label-second">US</span></label>
</div>

dabblet.js

$.on('change', 'input', function() { alert('change') })

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}