使用自定义复选框停止点击传播

Question

我正在使用自定义样式的复选框，我已使用font-awesome图标替换了默认复选框：link to image

问题是，当我双击任何项目时，虽然复选框功能，但点击也会被解释为我正在突出显示文本： link to image

任何人都知道如何获得与标准复选框控件相同的点击行为，其中点击不会传播到文本？

这是我用于复选框的代码：

CSS：

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
} 
input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    letter-spacing: 10px;
    font-size: 1.2em;
    width: 1.4em;
    content: "\f096";
}
input[type=checkbox]:checked + label:before {
    content: "\f046";
}

HTML：

  <div>
    <input type="checkbox" id="a">
    <label for="a">foo</label>
  </div>
  <div>
    <input type="checkbox" id="b">
    <label for="b">bar</label>
  </div>
  <div>
    <input type="checkbox" id="c">
    <label for="c">blah</label>
  </div>