javascript - 使用 javascript 聚焦不会像使用 Tab 时那样显示复选框的轮廓样式

Question

当使用选项卡浏览页面上的输入时，一旦聚焦，它们就会变成轮廓。但是，当我尝试使用箭头键等方式执行类似操作时，关注复选框不会显示轮廓样式。

jq(elems).keydown(function(e){
    if(!e) return;
    if(e.keyCode == '38') {
        var el = ... // searching for the next element
        el.focus();
    }

即使我在focus之后手动添加outline样式，或者添加css之类的

input[type="checkbox"]:focus 
{
  outline-style:auto; 
  outline-color: 
 -webkit-focus-ring-color;
}

那是行不通的。焦点在checkbox上，样式在，但是不显示。其他一些样式正确应用，例如，如果我添加如下样式:

input[type="checkbox"]:focus {
    box-shadow:1px 1px lightgrey;
}

当焦点位于复选框上时，我可以看到阴影框，但轮廓不存在。

Answer 1

我只在原始 js 中完成过此操作，但希望它能有所帮助:

确保在文档上设置事件监听器 - 否则您只会在已经“位于”元素“内部”的情况下按下键时触发事件。

JS:

var el = document.getElementById('my-check');
document.addEventListener('keydown', function(e) {
  e.preventDefault();
  el.focus();
});

CSS:

input[type="checkbox"]:focus, input[type="checkbox"]:active {
  width: 100px;
  height: 100px;
  outline-color: -webkit-focus-ring-color;
  outline-style: solid !important;
}

DOM:

<form>
  <input type="checkbox" id="my-check" />
</form>

fiddle :https://jsfiddle.net/radmpxgs/1/

抱歉进行了编辑。