javascript - 将焦点大纲设置为包含复选框上的标签

Question

当在复选框列表中切换时，我想看到整个标签周围的复选框轮廓。我刚刚将大纲放在输入本身的代码中:

<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>

代码笔:https://codepen.io/anon/pen/gyeGZG

这个想法是让键盘用户等尽可能地访问复选框。

干杯

Answer 1

你不需要 JS 来做这件事，CSS 可以管理它。

: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>