CODEWITHSUNDEEP
jqueryhtmlcssruby-on-railsruby
anmaree
anmaree

Reputation: 657

Make div work like a check box

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)?

Upvotes: 0

Views: 1325

Answers (2)

Andrey Gorelov
Andrey Gorelov

Reputation: 11

It looks like you want to custom style your checkbox.

  1. Hide the checkbox:

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

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

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

  3. Add styles to your checkbox label

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

  4. 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?

Upvotes: 0

Sheik Fresh
Sheik Fresh

Reputation: 11

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.

Upvotes: 1

Related Questions