复选框样式为非复选框需要标签以填充行

Question

我有一个bootstrap模式，用户可以做多个选择。对于多种选择，我使用了复选框。但我不希望它们显示为复选框，而是我希望它在用户点击它突出显示的选项时。

我通过将复选框放大，放在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