Simple form builder checkbox collection custom html input - ruby-on-rails

Question

With simple_form_for, how should one go about building something like a color selector? Imagine a page where the user can pick a number of colors to work with by checking checkboxes. I would like to present a little box with the color in it and a checkbox next to it so the user can pick the color by checking the check box. Something like this
<input type="checkbox" name="colors[test]"><div style="background-color: red; width: 20px; height: 20px"></div>
<input type="checkbox" name="colors[test]"><div style="background-color: green; width: 20px; height: 20px""></div>
<input type="checkbox" name="colors[test]"><div style="background-color: blue; width: 20px; height: 20px""></div>

Answer 1

You can add the html tags to the collection and define classes for each of them. And then style them accordingly. I am assuming you have a simple_form_for #color or something similar.
<%= f.input :test, :label => 'Choose a Color:', :collection =>{'<div class="red colorbox"></div>'.html_safe => 'red', '<div class="green colorbox"></div>'.html_safe => 'green', '<div class="blue colorbox"></div>'.html_safe => 'blue' }, :as => :check_boxes %>
In your stylesheet:
/* The colorbox will be under a label with collection_check_boxes class.*/
.collection_check_boxes {
width: 30px;
height: 20px;
}
.colorbox {
width: 20px;
height: 20px;
}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}