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”更改为另一个整数＆gt; 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>

标签时查看勾选标记的轮廓

2 个答案: