在选中复选框列表时,我希望看到整个标签周围的复选框的轮廓。我刚才把代码放在输入本身上:
<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
我们的想法是让键盘用户可以访问复选框等。
干杯
你不需要JS来做这件事,CSS可以管理它。
:焦点之内
:CSS伪类中的焦点表示已获得焦点或包含已获得焦点的元素的元素。换句话说,它表示一个元素,它本身与:focus伪类匹配,或者有一个与:focus匹配的后代。 (这包括阴影树中的后代。)
支持是非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>
: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>