html - 支持键盘导航的自定义 HTML 复选框符号？

Question

我可以替换传统的 HTML 复选框符号“unchecked”、“checked”和使用自定义符号“不确定”:

<link rel="stylesheet" 
  href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<style type="text/css">
  input[type="checkbox"] {
    display: none;
  }
  input[type="checkbox"]+label:before {
    font-family: FontAwesome;
    content: "\f096"; /* fa-square-o */
  }
  input[type="checkbox"]:checked + label:before {
    content: "\f046"; /* fa-check-square-o */
  }
  input[type="checkbox"]:indeterminate + label:before {
    content: "\f0c8"; /* fa-square */
    color: grey;
  }
</style>
...
<input type="checkbox" id="cb1" />
<label for="cb1"> label text</label>

参见 http://plnkr.co/SPvN1xEkQqcFcYbxWur2

除了键盘导航和控制外，这非常有用。使用传统的复选框，您可以 [TAB] 通过输入元素和链接，然后使用 [SPACE] 和 [ENTER] 访问它们。自定义符号使用 display:none 似乎禁用了这些元素的键盘控制。

如何为这些自定义复选框重新启用键盘控制？

Answer 1

与其将复选框设置为display: none，不如将它们隐藏在后面。您仍然可以通过 Tab 键来聚焦并保留其他键盘事件。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<style type="text/css">
  input[type="checkbox"] {
    position:absolute;
    margin: 2px 0 0;
    z-index:0;
  }

  input[type="checkbox"]+label:before {
    position: relative;
    z-index: 5;
    background: white;
    font-family: FontAwesome;
    content: "\f096";
  }

  input[type="checkbox"]:checked + label:before {
    position: relative;
    z-index: 5;
    background: white;
    content: "\f046";
  }

  input[type="checkbox"]:indeterminate + label:before {
    position: relative;
    z-index: 5;
    background: white;
    content: "\f0c8";
    color: grey;
  }
</style>
...
<input type="checkbox" id="cb1" />
<label for="cb1"> label text</label>

实例:http://plnkr.co/edit/6lzcJIdMWFRzVNQBxRPu?p=preview