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

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