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>

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

该想法是使键盘用户等可以使用的复选框尽可能多。

欢呼

Answer 1

您不需要JS就能做到，CSS可以管理它。

：焦点内

CSS伪类中的：focus-within表示已获得焦点的元素，或包含已获得焦点的元素。换句话说，它表示元素本身与：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>

Answer 2

:focus-within的支持率较低。因此，您可能想使用javascript。因此，您将不会遇到任何支持问题。

const inputs = document.querySelectorAll("input");

inputs.forEach(function(p){
  p.addEventListener("input",function(){
    inputs.forEach(function(p){
      p.parentElement.parentElement.classList.remove("bordered");
    })
      p.parentElement.parentElement.classList.add("bordered");
})
});

document.addEventListener("click", function(){
  inputs.forEach(function(p){
    p.parentElement.parentElement.classList.remove("bordered");
  });
});

.b-label {
  margin:1em;
  display: inline-block;
  padding:.25em;
}

.bordered {
  border: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">12</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">12</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">12</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">12</span>
  </span>
</label>

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

2 个答案: