:focus-within 样式在单击输入标签时闪烁答案

【问题标题】：:focus-within styles flash when clicking an input label:focus-within 样式在单击输入标签时闪烁
【发布时间】：2018-09-14 17:02:10
【问题描述】：

问题：

单击具有:focus-within 样式的父元素中的输入标签会导致:focus-within 样式出现不希望的闪烁。

背景：

我想使用 :focus-within 在一组相关的单选按钮处于焦点时向用户提供一些视觉反馈来提高可访问性。

将标签附加到单选按钮允许用户单击标签以选择相应的单选按钮。但是，单击标签会导致:focus-within 样式在鼠标按下时闪烁。

HTML

<div class="parent">
    <label><input type="radio" name="x"/>First</label>
    <label><input type="radio" name="x"/>Second</label>
    <label><input type="radio" name="x"/>Third</label>
</div>

CSS

.parent {
    border: 2px solid grey;
    padding: 10px;

    &:focus-within {
        background: skyblue;
    }
}

https://jsfiddle.net/ggamir/nb3sy26k/

【问题讨论】：

标签： css

【解决方案1】：

解决方案

将tabindex="-1" 添加到标签中。这允许它们成为“可聚焦”元素，而不是 tabindex 顺序的一部分。

https://jsfiddle.net/ggamir/krnavadz/

说明

当用户开始点击标签 (mousedown) 时，之前聚焦的单选按钮将失去其 :focus 状态。

当用户完成对标签的点击 (mouseup) 时，浏览器会选择相应的单选按钮并赋予其:focus 状态。

默认情况下，label 元素是“不可聚焦的”，因此当鼠标放在标签上时，父元素中的任何内容都没有焦点，这就是为什么 :focus-within 样式在那一刻被删除的原因。

将tabindex 添加到标签使其成为“可聚焦”元素，因此当鼠标向下单击它时，父级仍然具有:focus-within，因此样式将在整个单击期间保持应用。

在tabindex="-1" 中使用-1 很重要，这样标签就不会不必要地添加到tabindex 顺序中。

注意

元素有一些默认的:focus 和:active 样式，一旦通过tabindex 使标签“可聚焦”，这些样式将应用于标签，因此可能需要清除这些样式以免混淆用户：

.my-label:focus, .my-label:active {
    outline: none;
}

【讨论】：