JSFiddle - React, Tailwind, and code Playground

by frankee

HTML

<input id="txt" type="text" value="input" />
<br />
<label for="chk" accesskey="L">
    Checkbox:
    <input id="chk" type="checkbox" />
</label><br />

<input id="btn" type="button" value="Focus Label" />

CSS

* {
    margin: 8px;
}
.highlight {
    background-color: yellow;
}
:focus {
    outline: 2px solid blue;
}

input[type=checkbox]:focus {
    outline: none;
}
.pseudo-focus {
    outline: 2px solid blue;
}

JavaScript

label = $("label").first();

  $('input[type=checkbox')
        .focus( function() {
            $(this).closest('label').addClass('pseudo-focus');
        })
        .blur( function() {
            $(this).closest('label').removeClass('pseudo-focus');    
        });