单击时使单选按钮的焦点不可见，但焦点应在键盘导航上可见

Question

如何使焦点仅在单击时对单选按钮不可见（焦点应通过键盘导航可见）

禁用鼠标按下事件或在鼠标按下时使用 setTimeout（（）=>$（event.target）.blur（），1）正在工作，但是当焦点从单击开始时，使用箭头键选择单选按钮不起作用。

那么，使单选按钮仅在单击时不可见焦点而不会使箭头键选择不可用的最佳方法是什么？

提前致谢

Answer 1

我们在谈论吗

pointer-events: none;

还是我错过了什么？

Answer 2

您可以尝试以下代码：

.HTML：

<input type="text" class="inp" />
<input type="radio" class="rb" />

.CSS：

.inp {
   display: block;
}
.rb {
 /*hide default outline*/
   outline: none;  
}
[type=radio]:not(:hover):not(:active):focus {
  /*set custom focus ring instead via box-shadow*/
    box-shadow: 1px 0 1px #c5c3c3 inset, -1px 1px 1px #c5c3c3 inset, 0px 0px 0 2px #fff, 0px 0px 0 3px rgb(100, 149, 237);
}   

它将在悬停和单击时隐藏焦点环，但在单选按钮通过键盘获得焦点时显示它。

这是JSFiddle的链接

对于这种叫做focus-ring的东西，还有一个建议（目前只在Firefox中实现，但有polyfill）。

Answer 3

这对

我有用

添加了用于鼠标按下和模糊的事件处理程序，如下所示

---------------模板-----------------

<input type="radio"
(mousedown)="removeOutline($event)"
(blur)="radioBlur($event)"/>

------事件处理程序-----------------

removeOutline(event: MouseEvent): void {
        $(event.target).addClass("focus");
    }
radioBlur(event: MouseEvent): void {
        $(event.target).removeClass("focus");
        if ($(event.target).attr("class") === "") {
            $(event.target).removeAttr("class");
        }
    }
 -----------css---------------
  .focus {
        outline: 0;
   }