Ruby on Rails Dropdown <Select> Menu - How to Style or Apply Class to The Options

Ruby on rails dropdown select menu - how to style or apply class to the options?

Rails Helper options_for_select absolutely allows you to provide styling information for individual options.

This is straight from the documentation of options_for_select

  options_for_select([ "Denmark", ["USA", {:class=>'bold'}], "Sweden" ], ["USA", "Sweden"])

gives

  <option value="Denmark">Denmark</option>\n<option value="USA" class="bold" selected="selected">USA</option>\n<option value="Sweden" selected="selected">Sweden</option>

and

  options_for_select([["Dollar", "$", {:class=>"bold"}], ["Kroner", "DKK", {:onclick => "alert('HI');"}]])

gives

  <option value="$" class="bold">Dollar</option>\n<option value="DKK" onclick="alert('HI');">Kroner</option>

And in your case it would be

options_for_select([["Black", {:style => "background-color: Black; color: #ffffff"}],
                    ["Gray", {:style => "background-color: Gray"}],
                    ["DarkGray", {:style => "backgorund-color: DarkGray"}]])

Add style class to select_country field

class and id are html options and they should be passed as third argument to the country_select method. The second argument is for list of options to be displayed in the drop-down which is why you see id and class as selectable options in your drop down instead of getting applied as html options.

You can do something like below:

<%= f.country_select :ship_country, {}, {class: "dropdown", :id => "payment_ship_country"} %>

For your reference, checkout below example from the country_select documentation:

Supplying additional html options:

country_select("user", "country", { priority_countries: ["GB", "FR"] }, { selected: "GB", class: 'form-control' })

This should work from here:

<%= f.country_select :ship_country, priority_countries = ["United States"], options = {}, html_options = {:class => "input-lg", :id => "payment_country"} %>

Adding a css class to select in Rails

select takes 2 hash options, first for 'select options' and another for 'html'.

Try following:

= f.select(attr, [1,2,3], { include_blank: true }, { class: 'form-control' })

rails select option styling with bootstrap

You could style it like this <%= f.select :willingToRelocate, ['Yes', 'No'], {}, class: 'form-control'} %>

You could check out this link. The api.rubyonrails have a great amount of information that you could use for these kind of problems.

How to add a class to a select dropdown loop using ERB

This is what I ended up doing:

<%= f.select :player_id, options_for_select( @players.collect { |player| ["#{player.first_name} #{player.last_name}", player.id] } ), {}, { class: 'form-control' } %>

Add class to collection_select on Ruby On Rails formulary

You're doing it right, but you need to separate the hashes:

<%= f.collection_select :id, TipusProducte.order(:nom),:id ,:nom, { include_blank: false }, { class: "btn btn-secondary dropdown-toggle" } %>

Otherwise, it gets interpreted as one hash. The function spec has two object hashes as arguments; the first is for collection options, the second for HTML options.

Rails select tag - set specific option style

As the documentation says for options_for_select, you can do it like this:

options_for_select([ 1, 2, [ 3, { :class => 'standard' }], 4, 5 ], [ 1 ])

Rails, collection select style

...what I want is to have a whole div inside the option tag

As far as I know, it is invalid to have any other html tags inside of an option tag.

Also, I would like the options to be listed, rather than shown in a
dropdown. Any ideas on how to accomplish that

Select tag in html has a size attribute, eg which shows the first n options in the select tag. You could write some code in rails to make the size attribute equal to the count of the collection you are displaying in the drop down list.

For example, you could add { size: @meal.meal_sizes.count } to the html options hash of the select tag.

<%= f.collection_select(:meal_size_id, @meal.meal_sizes, :id, :name, {:prompt => false}, { class: "form-control", size: @meal.meal_sizes.count }) %>

---

Related Topics