체크 박스가 아닌 체크 박스 - 행을 채우기 위해 라벨이 필요함

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