複選框樣式爲非複選框需要標籤填充行

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