css - :focus-within styles flash when clicking an input label

Question

问题:

在具有 :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/

Answer 1

解决方案

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

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

---

说明

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

当用户完成标签上的点击 ( mouseup ) 时，浏览器会选择相应的单选按钮并为其提供一个 :focus。状态。

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

添加tabindex到标签使它成为一个“可聚焦”元素，所以当鼠标点击它时，父级仍然有 :focus-within ，因此样式将在整个点击过程中保持应用。

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

注意事项

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

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