JSFiddle - React, Tailwind, and code Playground

by lomatek

HTML

<label><div class="checkbox" tabindex=0><span class="icon"></span></div> text</label>

<div class="checkbox checked" tabindex=0><span class="icon"></span></div>
<div class="checkbox" tabindex=0><span class="icon"></span></div>
<div class="checkbox checked" tabindex=0><span class="icon"></span></div>
<div class="checkbox checked" tabindex=0><span class="icon"></span></div>

CSS

body {padding: 50px;}
div.checkbox {width: 11px; height: 11px; border-radius: 2px; border: 1px solid #ccc; margin: 10px; cursor: pointer;}
div.checkbox.checked {}
div.checkbox span.icon {width: 15px; height: 15px; display: block; position: relative; top: -3px;}
div.checkbox.checked span.icon {background: url(https://ssl.gstatic.com/ui/v1/menu/checkmark.png) no-repeat -5px -3px;}
div.checkbox.focus {
    outline: 1;
    border-color: #000;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1)
}

JavaScript

$(function () {
    $("div.checkbox").live('click keypress', function (ev) {
        $(this).toggleClass('checked');
    }).live('focusin focus blur onfocus', function () {
        console.log('focus');
        $(this).addClass('focus');                
    }).live('focusout', function () {
        $(this).removeClass('focus')    
    });
});