在复选框上设置包含标签的焦点轮廓

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 CSS 伪类表示已获得焦点的元素或包含已获得焦点的元素。换句话说，它表示一个元素本身与 :focus 伪类匹配，或者具有与 :focus 匹配的后代。（这包括影子树中的后代。）

MDN

^{支持非 IE/Edge，尽管当 Edge 切换到基于 Chromium 时，后者可能会发生变化}

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>