是否可以只关注复选框的选项卡？答案

【问题标题】：Is it possible to style just focus on tab at checkboxes?是否可以只关注复选框的选项卡？
【发布时间】：2018-05-14 12:05:27
【问题描述】：

我想知道是否可以只关注选项卡（使用 ↹ 浏览页面）而不是如果用户单击项目。

就像复选框的默认行为一样。如果我使用制表符，它会得到一个蓝色轮廓（看起来像框阴影）。

就像我想要一个新的红色框阴影/轮廓以选项卡为焦点，但如果用户单击复选框则不需要。

&lt;input id="checkBox" type="checkbox"&gt;

【问题讨论】：

你的意思是“点击”吗？
@AjAX。标签不点击
@Paili 看我的回答
为什么在标签上而不是在点击上？
我希望其他样式集中在点击上；）@TakitIsy

标签： html css

【解决方案1】：

你可以通过 Jquery 做到这一点

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    $('#checkBox').addClass('outline');
  }
});

document.addEventListener('click', function(e) {
  $('#checkBox').removeClass('outline');
});

.outline{
 box-shadow: 2px 2px 2px red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkBox" type="checkbox">

或
这个插件：https://github.com/ten1seven/track-focus
在 css 中：

body[data-whatinput="keyboard"] #checkBox:focus {
  box-shadow:  0 0 5px red;
}

【讨论】：

是的，这正是我想要的 :) 但我希望我可以用纯 CSS 来做到这一点：D @לבני מלכה

【解决方案2】：

焦点将在您按住鼠标时。如果您在单击时不想要它，则可以使用悬停来代替。

   input:hover {
      box-shadow: 2px 2px 2px rgba(255,0,0,.5);  
    }
    input:checked {
      box-shadow: none;  
    }

    &lt;input id="checkBox" type="checkbox"&gt;

您还可以通过设置标签的样式来创建自己的样式。看看这个https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

【讨论】：

感谢您的链接！但是看看复选框的默认行为。只有当我通过标签而不是单击时它才会得到蓝色阴影。无论是选中还是未选中，当我单击它时都不会出现蓝色边框，以这种方式聚焦它。只有当我把它集中在标签上时。如果我只是在浏览时悬停，它也不会得到蓝色框阴影。 @娜奥米
不确定你想要它做什么？
我也是，我不明白...你使用任何库（如引导程序）
我想要标签上的红色轮廓。但是如果我点击它应该看不到它抱歉，这真的很难解释：D @Naomi
边框还是阴影？

【解决方案3】：

您可以设置复选框的所有可能状态：

   input:focus {
      box-shadow: 2px 2px 2px rgba(255,0,0,.5);
    }
    input:checked {
      box-shadow: none;  
      /* HIDE OUTLINE - ACCESSIBILITY BAD PRACTICE */
      outline: none;
    }

    &lt;input id="checkBox" type="checkbox"&gt;

【讨论】：

耶，这是可能的，但如果我点击它，我不希望有红色边框。只有当我浏览并聚焦它时。 @安德
好的，但是如果你点击它，输入就会被选中，所以选中的选择器是触发器
不，查看复选框的默认行为。只有当我通过标签而不是单击时它才会得到蓝色阴影。无论是选中还是未选中，当我单击它时都不会出现蓝色边框，以这种方式聚焦它。只有当我把它集中在标签上时。如果我只是在浏览时悬停，它也不会得到蓝色框阴影。 @לבנימלכה
不，查看复选框的默认行为。只有当我通过标签而不是单击时它才会得到蓝色阴影。无论是选中还是未选中，当我单击它时都不会出现蓝色边框，以这种方式聚焦它。只有当我将它集中在选项卡上时。如果我只是在通过选项卡时悬停，它也不会得到蓝色框阴影。 @安德
我不明白你真正想要什么，也许你在谈论大纲属性？我已经更改了答案以检查是否是这样。

【解决方案4】：

使用我在评论中提供给您的链接中的解决方案，
(Input effect on keyboard tab -> focus, but NOT on click)

这是我要做的：

var body = document.getElementsByTagName("BODY")[0];

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    body.classList.add('show-focus-outlines');
  }
});

document.addEventListener('click', function(e) {
  body.classList.remove('show-focus-outlines');
});

body.show-focus-outlines input:focus {
  outline: none;
  box-shadow: 0 0 8px 2px red;
}

body:not(.show-focus-outlines) input:focus {
  outline: none;
}

<body>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</body>

请注意，我只使用了 Javascript（在链接中，即 jQuery），
并尝试用 CSS 渲染一些漂亮的东西。

希望对你有帮助。

【讨论】：

【解决方案5】：

非常简单。您可以使用:focus 来设置元素样式如果您想要点击对象的不同样式，请使用 :active 设置样式。

这里是<a> 标记的示例。

.click,.focus{
color : red;
text-decoration: none;
}
.click:focus{
outline: none;
color: red;
text-decoration: none;
background-color: #fff;
}
.click:active{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}

.focus:focus{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}
.focus:active{
outline: none;
color: red !important;
text-decoration: none;
background-color: #fff !important;
}

<a class="click" href="#">Click Me</a><br>
<a class="focus" href="#">Focus me[use Tab]</a>

【讨论】：