样式为非复选框的复选框 - 需要标签来填充行

Question

我有一个引导模式，用户可以在其中进行多项选择。对于多项选择，我使用了复选框。但我不希望它们显示为复选框，而是希望它显示在用户单击它突出显示的选择的位置。

我通过将复选框放大、定位在label 上方并将opacity 0 赋予复选框来设置它的样式。这效果很好。

我希望选择的整行都用颜色填充。因此，如果用户点击foobar 和foo，两者都会以红色高亮显示，中间没有空白。

现在，我在让 label 填充行区域时遇到问题。我不想挤压选择之间的空间。选中时如何让label 用红色背景填充行区域？

http://codepen.io/dman777/pen/MbqPeZ

Answer 1

如果我理解正确 - 这就是你要找的东西

.goals-multiselect {
  div {
    height: 100%;
    position:relative;
  }
  input[type=checkbox]{width:100%;}
  label {margin:0;line-height:40px;}
}    

input[type="checkbox"] {
  height: 32px;
  position: absolute;
  z-index: 3;
  opacity: 0;
}

http://codepen.io/anon/pen/yVRgvY