Make div work like a check box

Question

I have a list of color names with check boxes. Instead of having the check boxes be there, I would like to be able to select the entire div with the title in it. Checked div's would be understood with a different background color.

my html is also and erb file and contains ruby. I want the <%= color.name %> to be inside the "idea[color_ids][]" id div. but when I try putting them inside each other I get a rails error

html/erb file

  <ul class="multi-column-checkbox">
        <% for color in Color.master_colors %>
            <li><%= check_box_tag "idea[color_ids][]", color.id,   
@idea.colors.include?(color) %> <%= color.name %></li>
        <% end %>
      </ul>

how can I get color.names inside the "idea[color_ids][]" div instead of just inside the li div? so that I can select the entire "idea[color_ids][]" (with color name title inside)?

score 1 · Answer 1 · answered Oct 07 '13 at 19:59

1

You could try something like this:

<label for="check1">
  <input type="checkbox" name="check" id="check1" /> Testing
</label>

Then you could either treat the label like a div or add a div-wrapper inside label.

answered Oct 07 '13 at 19:59

Sheik Fresh

11
2

the thing is that I have ruby modles that create these tags in my original file and I do not know how to put the color.name inside the idea_color_ids_ div with ruby – anmaree Oct 07 '13 at 20:07

score 0 · Answer 2 · edited May 23 '17 at 12:20

It looks like you want to custom style your checkbox.

Hide the checkbox:

.multi-column-checkbox input[type="checkbox"] {
    visibility: hidden;
}

Add css styles (css class) to your 'li' say 'column-checkbox'

 .column-checkbox{
     width: .. px;
     height: .. px;
     background-color: some_color;
     borders...
     **position: relative;**
 }

Add styles to your checkbox label

.column-checkbox label {
    **position: absolute;**
    /* top, bottom, left, right */ 
    width: ...;
    height: ...;
    /* etc */
}

Style your label for after checkbox is selected

.column-checkbox label:after {
    /* Styles after select */
}

You can also add styles for hover on the list item

.column-checkbox label:hover{
    /* Hover styles */
}

You can probably find examples on the net for custom css checkbox. Also, take a look at this answer: How to style checkbox using CSS?

Make div work like a check box

2 Answers2