复选框样式为 non-checkbox- 需要标签来填充行

Question

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

我将复选框放大，放置在 label 上方，并将 opacity 0 赋予复选框，使其看起来像这样。这效果很好。

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

现在，我在让 label 填充行区域时遇到问题。我不想压缩选择之间的 spaces。如何让 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