使用tabbing键时查看复选标记上的轮廓

Question

如何将焦点大纲添加到复选标记？例如，当按下键盘上的“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键顺序中排在第三位。

Answer 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>

​