选项卡时在复选标记上看到轮廓答案

【问题标题】：seeing outline on checkmarks when tabbing选项卡时在复选标记上看到轮廓
【发布时间】：2017-04-14 20:17:10
【问题描述】：

如何为复选标记添加焦点轮廓？例如，当按下键盘上的“标签”时，用户将看到每个已被标签的内容的大纲。

td:focus {
  outline: 3px dotted #000000;
  outline-offset: 1px;
  color: red;
}

<table>
  <tr>
    <td>
      <label for="A1">
                    <span class="hidden">A-1</span>
                    <input type="checkbox" value="A1" name-"A1" id="A1">
                    <span aria-hidden="true">&nbsp;</span>
                </label>
    </td>
  </tr>
</table>

我不知道我到底做错了什么。

【问题讨论】：

你想要复选框的轮廓，还是整个 td？您的问题说明了一件事add a focus outline to checkmarks，但您的代码说明了另一件事td:focus。
嗨，我想勾勒出复选框的轮廓，然后我可以按空格键选择它们。谢谢。

标签： html css

【解决方案1】：

无论您想要关注什么，都将tabindex="0" 添加到元素的标签中。

td:focus {
    outline: 3px dotted #000000;
    outline-offset: 1px; color:red;
}

<table>
    <tr>
        <td tabindex="0" >
            <label for="A1">
                <span class="hidden">A-1</span>
                <input type="checkbox" value="A1" name-"A1" id="A1">
                <span aria-hidden="true">&nbsp;</span>
            </label>
        </td>
    </tr>
</table>

编辑：为了完整起见，当您将“0”更改为另一个大于 0 的整数时，这将成为该元素在制表符顺序中的位置。例如。 tabindex="3" 使该元素在页面的 Tab 键顺序中排在第三位。

【讨论】：

谢谢，这很好用。但是，当我选择带有空格键的复选框时，它不会选中该框。发生的事情是在通过框标签之后，它再次通过框标签而不显示轮廓检查带有空格键的框。如果您知道为什么会发生这种情况，请随时告诉我。非常感谢您的时间和帮助。非常感谢。

【解决方案2】：

如果您只想指定复选框，可以使用属性选择器。

input[type="checkbox"]:focus {
  outline: 3px dotted #000000;
  outline-offset: 1px;
  color: red;
}

<table>
  <tr>
    <td>
      <label for="A1">
       <span class="hidden">A-1</span>
        <input type="checkbox" value="A1" name-"A1" id="A1">
         <span aria-hidden="true">&nbsp;</span>
      </label>
    </td>
  </tr>
</table>

【讨论】：