Флажок в стиле non-checkbox-нужна ярлык для заполнения строки

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