[Rails]collection_selectにclassをつける

はじめに

本記事では、collection_selectにclassをつける方法を記述します。

うまくいかないコード

第５引数、第６引数にオプションを記述し、第７引数にclass名を指定しています。

<%= search_form_for @q, url: search_foods_path, class: "food-search", id:"pull-down" do |f| %>
  <%= f.label :shop_name_or_shop_name_kana_or_food_name_or_station_cont, '店名・メニュー名・駅名', class: "search-label" %><br/>
  <%= f.text_field :shop_name_or_shop_name_kana_or_food_name_or_station_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
  <%= f.label :user_nickname_cont, 'ユーザー名', class: "search-label" %><br/>
  <%= f.text_field :user_nickname_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
  <%= f.label :meal_type_id_eq, '種類', class: "search-label" %><br/>
 <%# ここ↓ %>
  <%= f.collection_select :meal_type_id_eq, MealType.all, :id, :name, include_blank: '--', disabled: 0, class: "search-text" %><br/>
  <%= f.label :spicy_level_id_eq, '辛さ', class: "search-label" %><br/>
  <%= f.collection_select :spicy_level_id_eq, SpicyLevel.all, :id, :name, include_blank: '--', class: "search-text" %><br/>
  <%= f.submit "SEARCH", class: "search-submit" %><br/>
<% end %>

ここが間違えているようです。

  <%= f.collection_select :meal_type_id_eq, MealType.all, :id, :name, include_blank: '--', disabled: 0, class: "search-text" %><br/>
  <%= f.label :spicy_level_id_eq, '辛さ', class: "search-label" %><br/>
  <%= f.collection_select :spicy_level_id_eq, SpicyLevel.all, :id, :name, include_blank: '--', class: "search-text" %><br/>
  <%= f.submit "SEARCH", class: "search-submit" %><br/>

修正したコード

第５引数、第６引数にしていたオプションを　{}で記述することで、
第５引数にまとめました。
また、第６引数にclass名を指定してましたところ、うまくCSSが効きました。

f.collection_selectの場合は第6引数をclass名にする必要があるらしいです。
オプションの後に{}無しで記述すると、HTMLのオプションと認識されるようです。

<%= search_form_for @q, url: search_foods_path, class: "food-search", id:"pull-down" do |f| %>
  <%= f.label :shop_name_or_shop_name_kana_or_food_name_or_station_cont, '店名・メニュー名・駅名', class: "search-label" %><br/>
  <%= f.text_field :shop_name_or_shop_name_kana_or_food_name_or_station_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
  <%= f.label :user_nickname_cont, 'ユーザー名', class: "search-label" %><br/>
  <%= f.text_field :user_nickname_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
  <%= f.label :meal_type_id_eq, '種類', class: "search-label" %><br/>
 <%# ここ↓ %>
  <%= f.collection_select :meal_type_id_eq, MealType.all, :id, :name, {include_blank: '--', disabled: 0}, class: "search-text" %><br/>
  <%= f.label :spicy_level_id_eq, '辛さ', class: "search-label" %><br/>
  <%= f.collection_select :spicy_level_id_eq, SpicyLevel.all, :id, :name, {include_blank: '--'}, class: "search-text" %><br/>
  <%= f.submit "SEARCH", class: "search-submit" %><br/>
<% end %>

以上です。

終わりに

短時間で解決できましたが、やや特殊なケースかなと思い、記事にしました。

以下参考サイトです。
collection_select not inserting 'class' attribute?
collection_selectにclassをつける方法
Railsドキュメント
collection_selectタグでclassが反映されない

明日も頑張ります！！！