Question

I have

<%= f.input :user_type, :label_html => { :class => 'option_label_name' }, :label => "User Type" ,:collection => [["Master"], ["HO Administrator"], ["Practice Manager"], ["Branch Administrator"], ["Consultant"]], :include_blank => false %>
</div>

This creates a list with many options and all that is good but I want to know if there is any way to provide a css styling class to the collection elements only…

As in the current form the styling is provided only to the label and not the options…

I have found one solution… it is not the one that I was looking for but this does work..

<div id="innerblock_left">
<%= f.label :user_type, :class =>"label_name", :label => "User Type" %>
<select class="style2">
<option value="1">Master</option>
<option value="2">HO Administrator</option>
<option value="3">Practice Manager</option>
<option value="4">Branch Administrator</option>
<option value="5">Consultant</option>
</select>
</div>

although it would if great if someone knew how to provide styling to the simple form collection element…

Thank you for reading..

Answer 1

0Just a simple solution :

In your form helper, define the collection :

def list
  [["Master",:class => "d_1"], ["HO Administrator",:class => "d_2"], ["Practice Manager",:class => "d_0"],["Branch Administrator",:class => "d_2"], ["Consultant",:class => "d_2"]]
end

in your form :

<%= f.input :user_type, :label_html => { :class => 'option_label_name' }, :label => "User Type" ,:collection => list, :include_blank => false %>

and add some CSS tricks in your asset :

.d_0 {
  font-weight: bold; }
.d_1{
  font-style: italic;
  text-decoration: underline;
  padding-left: 10px;}
.d_2 {
  font-style: italic;
  padding-left: 20px;}