Ruby on Rails: collection_select - display something other than text - ruby-on-rails

Question

On Rails 4. I am building a site where you can search graphics/products according to their assigned color scheme. Relevant models:
class Product < ActiveRecord::Base
belongs_to :color_scheme
end
class ColorScheme < ActiveRecord::Base
has_many :products
end
Each color scheme has five color hexadecimal values as columns. Using Bootstrap, here's what the code looks like as a dropdown, without being a collection_select:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-expanded="true" style="width:100%; margin-bottom:20px;">
<%= t('template.scheme')%> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<% #color_schemes.where(enabled: true).each do |scheme| %>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color1%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color2%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color3%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color4%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color5%>;"></div>
</li>
<% end %>
</ul>
</div>
And this is the visual result:
Since I'm using Ransack and this is a dropdown for search, I converted this into a collection_select but can't figure out how to get that same visual effect.
<%= f.collection_select :color_scheme_id_eq, ColorScheme.order('created_at DESC').all, :id,
:name, {include_blank: t('template.scheme')}, {class: 'form-control select-scheme',
style: 'width:100%; margin-bottom:20px;'} %>
So instead of just displaying the color scheme's text name, I'd like to show the colors like above. I understand this is probably outside the scope of what a collection select should be, but I feel the colors make more sense, visually, than the name. Is this possible, either through collection_select or some other tag that would work with Ransack? Thanks! Edit: I should also add that I'll probably still have the color scheme's name to the right of the colors, for people who are color-blind, etc.

Answer 1

I have another suggestion:
create a div which has color scheme above select field
then use to javascript click event on each color scheme to set value in select field
Here is my code sample to solve this issue:
.col-sm-3
#color-label-project{style: 'text-align: center;'}
- t('labels.project.label_color_hashes').map do |k, v|
%span{style: "width:30px; height: 20px; display: inline-block; background-color: #{v};", id: "#{k}", 'data-value': "#{k}"}
= f.input :label_color, collection: Project::LABEL_COLOR_NAME, prompt: true, disabled: false, label: false
:javascript
$("#color-label-project span").bind('click', function(){
$('select[name="project[label_color]"]').val($(this).data("value"));
})
here is my way: