Checkbox, die als nicht-Checkbox formatiert ist, braucht eine Beschriftung, um die Zeile zu füllen

Question

Ich habe ein Bootstrap-Modal, wo der Benutzer mehrere Möglichkeiten haben kann. Für die Mehrfachauswahl habe ich Checkboxen verwendet. Aber ich möchte nicht, dass sie als Ankreuzfelder angezeigt werden, sondern ich möchte, dass wenn der Benutzer auf eine Auswahl klickt, diese hervorgehoben wird.

Ich styled es so aussehen, indem das Kontrollkästchen vergrößert, positioniert über die label, und gab die opacity 0 an die Checkbox. Das klappt gut.

Ich möchte die ganze Reihe der Auswahl mit Farbe füllen. Also, wenn der Benutzer auf foobar und foo geklickt hat, würden beide rot leuchten ohne dazwischen liegenden Leerraum.

Im Moment habe ich ein Problem mit der label, um den Zeilenbereich zu füllen. Ich möchte die Leerzeichen zwischen den Auswahlen nicht quetschen. Wie kann ich die label den Zeilenbereich mit der Hintergrundfarbe rot füllen, wenn ausgewählt?

http://codepen.io/dman777/pen/MbqPeZ

Answer 1

Wenn ich Sie richtig verstanden habe - das ist, was Sie für

.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