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

我可以替换传统的HTML复选框符号“unchecked”、“checked”和“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>

输入[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+标签：在{
字体系列：Fontsome；
内容：“\f096”/*fa-square-o*/
}
输入[type=“checkbox”]：选中+标签：之前{
内容：“\f046”/*fa-check-square-o*/
}
输入[type=“checkbox”]：不确定+标签：之前{
内容：“\f0c8”/*fa广场*/
颜色：灰色；
}
...
标签文本

看

除了键盘导航和控制外，这项功能非常有效。使用传统复选框，您可以[TAB]通过输入元素和链接，并使用[SPACE]和[ENTER]访问它们。自定义符号使用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>

输入[type=“checkbox”]{
位置：绝对位置；
边际：2px0；
z指数：0；
}
输入[type=“checkbox”]+标签：在{
位置：相对位置；
z指数：5；
背景：白色；
字体系列：Fontsome；
内容：“\f096”；
}
输入[type=“checkbox”]：选中+标签：之前{
位置：相对位置；
z指数：5；
背景：白色；
内容：“\f046”；
}
输入[type=“checkbox”]：不确定+标签：之前{
位置：相对位置；
z指数：5；
背景：白色；
内容：“\f0c8”；
颜色：灰色；
}
...
标签文本

---

活生生的例子：

回答得又好又快。我甚至没有想到在新符号后面隐藏原来的复选框。非常感谢。@Yurim没问题，很高兴我能帮上忙。之前：和之后：缺少ie8背后的浏览器支持。这抵消了隐藏而不是“显示：无；”本机复选框的好方法。最好使用边距来调整元素。