keyboard (div, no JS)

dabblet.css

/**
 * keyboard (div, no JS)
 * http://forum.selfhtml.org/self/2015/may/03/indexwert-von-array-element-ermitteln/1639259#m1639259
 */

.keyboard
{
	display: -webkit-inline-flex;
	display: inline-flex;
}

.keyboard label
{
	border: 1px solid black;
	width: 2em;
	height: 6em;
	background: ivory;
}

.keyboard label.ebony
{
	position: absolute;
	width: 1.2em;
	height: 4em;
	margin-left: -0.6em;
	background: black;
}

.keyboard input:checked + label
{
	background: red;
}

.keyboard input
{
	visibility: hidden;
	position: absolute;
}

dabblet.html

<form>
	<div class="keyboard" lang="de"><!-- div should be fieldset, but doesn’t work with flex. -->
		<input type="radio" name="note" value="12" id="12"/><label for="12" class="ivory" aria-label="C"></label>
		<input type="radio" name="note" value="13" id="13"/><label for="13" class="ebony" aria-label="Cis/Des"></label>
		<input type="radio" name="note" value="14" id="14"/><label for="14" class="ivory" aria-label="D"></label>
		<input type="radio" name="note" value="15" id="15"/><label for="15" class="ebony" aria-label="Dis/Es"></label>
		<input type="radio" name="note" value="16" id="16"/><label for="16" class="ivory" aria-label="E"></label>
		<input type="radio" name="note" value="17" id="17"/><label for="17" class="ivory" aria-label="F"></label>
		<input type="radio" name="note" value="18" id="18"/><label for="18" class="ebony" aria-label="Fis/Ges"></label>
		<input type="radio" name="note" value="19" id="19"/><label for="19" class="ivory" aria-label="G"></label>
		<input type="radio" name="note" value="20" id="20"/><label for="20" class="ebony" aria-label="Gis/As"></label>
		<input type="radio" name="note" value="21" id="21"/><label for="21" class="ivory" aria-label="A"></label>
		<input type="radio" name="note" value="22" id="22"/><label for="22" class="ebony" aria-label="Ais/B"></label>
		<input type="radio" name="note" value="23" id="23"/><label for="23" class="ivory" aria-label="H"></label>
		<input type="radio" name="note" value="24" id="24"/><label for="24" class="ivory" aria-label="c"></label>
		<input type="radio" name="note" value="25" id="25"/><label for="25" class="ebony" aria-label="cis/des"></label>
		<input type="radio" name="note" value="26" id="26"/><label for="26" class="ivory" aria-label="d"></label>
		<input type="radio" name="note" value="27" id="27"/><label for="27" class="ebony" aria-label="dis/es"></label>
		<input type="radio" name="note" value="28" id="28"/><label for="28" class="ivory" aria-label="e"></label>
	</div>
	<button>OK</button>
</form>

settings.json

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