html - 使用 Tab 键时看到复选标记上的轮廓

Question

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

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>

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

Answer 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 的整数时，这将成为该元素在 Tab 键顺序中的位置。例如。 tabindex="3" 使该元素在页面的 Tab 顺序中排在第三位。