Search code examples
csstwitter-bootstrapangular-bootstrap

Checkbox styled as non-checkbox- need label to fill row

I have a bootstrap modal where the user can do multiple choices. For the multiple choices, I have used checkboxes. But I do not want them shown as checkboxes, rather I want it to where when the user clicks on a selection it highlights.

I styled it to look like this by having the checkbox enlarged, positioned over the label, and gave the opacity 0 to the checkbox. This works out good.

I want the whole row of the selection to fill with color. So, if the user clicked on foobar and foo, both would be high lighted red with no white space in between.

Right now, I am having a issue getting the label to fill the row area. I don't want squash the spaces between the selections. How can I get the label to fill the row area with the background color red when selected?

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

enter image description here

Solution

  • If I understand you correctly - this is what you're looking for

    .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