JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<select multiple='multiple'>
    <option>Test</option>
    <option>Test</option>
    <option>Test</option>
    <option>Test</option>
    <option>Test</option>
</select>

<div class="multiple">
    <fieldset class="option">
        <input type="checkbox" id="o1" value="1" />
        <label for="o1" tabindex="0">Test</label>
    </fieldset>
    <fieldset class="option">
        <input type="checkbox" id="o2" value="2" />
        <label for="o2" tabindex="0">Test</label>
    </fieldset>
    <fieldset class="option">
        <input type="checkbox" id="o3" value="3" />
        <label for="o3" tabindex="0">Test</label>
    </fieldset>
    <fieldset class="option">
        <input type="checkbox" id="o4" value="4" />
        <label for="o4" tabindex="0">Test</label>
    </fieldset>
    <fieldset class="option">
        <input type="checkbox" id="o5" value="5" />
        <label for="o5" tabindex="0">Test</label>
    </fieldset>
</div>

CSS

.multiple {
    border: 1px solid #999; display: block; overflow-y: scroll; overflow-x: hidden;
    padding: 1px 0; 
    margin: 10px 0; width: 53px;
    font-family: "MS Shell Dlg", Tahoma, sans-serif; font-size: 13.3px; 
    line-height: 16px;
}
.multiple .option label {padding: 0 5px 0 3px;}
.multiple input[type=checkbox] {position: absolute; top: 0; left: -9999em; visibility: hidden;}

.multiple input[type=checkbox]:checked + label {background: #3399FF; color: #FFF;}

JavaScript

$$('.multiple label').addEvent('keydown', function(ev){
    if(ev.key == 'space') {
        var c = this.getPrevious();
        c.checked = c.checked ? '' : 'checked'; 
    }
});