Set Focus outline on containing label on checkbox

Question

When tabbing through a list of checkboxes I want to see the outline of a checkbox around the whole label. The code I have just puts the outline on the input itself:

<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
  <span class="b-checkbox">
    <input class="b-input" name="Hello" type="checkbox" value="Hello">
  </span>
  <span class="b-text-wrap">
    <span class="b-text">Hello</span><span class="b-count">12</span>
  </span>
</label>

Codepen: https://codepen.io/anon/pen/gyeGZG

The idea is to make the checkboxes as accessible as possible for keyboard users etc.

Cheers

Answer 1

You don't need JS to do this, CSS can manage it.

:focus-within

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

MDN

^{Support is non-IE/Edge, although the latter may change when Edge switches to Chromium-based}

body {
  text-align: center;
}

.b-label {
  margin:1em;
  display: inline-block;
  padding:.25em;
}

.b-label:focus-within {
  outline :1px solid red;
}

<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
  <span class="b-checkbox">
    <input class="b-input" name="Hello" type="checkbox" value="Hello">
  </span>
  <span class="b-text-wrap">
    <span class="b-text">Hello</span><span class="b-count">1</span>
  </span>
  </label>
<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
    <span class="b-checkbox">
    <input class="b-input" name="Hello" type="checkbox" value="Hello">
  </span>
  <span class="b-text-wrap">
    <span class="b-text">Hello</span><span class="b-count">2</span>
  </span>
    </label>
<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
      <span class="b-checkbox">
    <input class="b-input" name="Hello" type="checkbox" value="Hello">
  </span>
  <span class="b-text-wrap">
    <span class="b-text">Hello</span><span class="b-count">3</span>
  </span>
</label>