keyboard (div)

dabblet.css

/**
 * keyboard (div)
 * 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 label.selected
{
	background: green;
}

.keyboard label:has(input:checked)
{
	background: red;
}

.keyboard input
{
	visibility: hidden;
}

dabblet.html

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

dabblet.js

var keyboardLabelElements = document.querySelectorAll('.keyboard label'),
	previousKeyboardLabelElement;

for (var i = 0, l = keyboardLabelElements.length; i < l; i++)
{
	keyboardLabelElements[i].addEventListener('click', function ()
	{
		if (previousKeyboardLabelElement && previousKeyboardLabelElement !== this)
		{
			previousKeyboardLabelElement.classList.remove('selected');
		}
		this.classList.add('selected');
		previousKeyboardLabelElement = this;
	}, false);
}

settings.json

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