【Rails】collection_selectでCSSが適用されない時は、classを指定できてるか確認しよう

はじめに

• オリジナルアプリ開発で発見したことについて、定着と備忘のためにまとめていきます。

結論

• CSS書けてるはずなのに変化がないときは、以下を確認してみよう
  • class名が間違っていないか
  • 記述したことが開発ツール上でも表示されているか
• collection_selectのoptionとHTML属性には {} を付けよう

経緯

やりたいこと

• collection_selectで作ったセレクトボックスのスタイリングをしたい

作成したコード(誤り)

#erbファイル
<div class="search-field">
  <%= f.label :occupation_id, "職種", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, selected: @search_params[:occupation_id], include_blank: "選択しない", class:"search-occupation") %>
</div>

検索フォームの一部でoccupationモデルから選択出来るようにしています。
collection_selectの具体的な使い方はガイド内をご確認下さい → Railsドキュメント

オプションで下記のものを指定しています。
・ selected: → 遷移後に@search_paramsの値が選択されるようにしています
・ include_blank: → 初期状態(選択していない状態)の値を指定しています

次の箇所で問題が発生しました。
3行目のclass:search-occupationに対して下記のCSS記述しましたが、適用されませんでした。

#scssファイル
.search-occupation {
    width: 100%;
    padding: 8px 8px 5px;
    outline: none;
}

開発ツールで確認すると、class:"search-occupation"が指定できていないことが分かりました。（画像3行目）

HTMLでclassが指定できていないため、CSSが無効になっている訳ということですね。
対応には下記の記事を参考にさせて頂きました。
ActionView::Helpers::FormOptionsHelper
【Rails】完全理解 formでセレクトボックスをつくるselectの使い方
railsでf.selectにclassを設定する

今回の対応

collection_selectについて調べていく中で、どうやらoptionとHTML属性には{}が必要と分かりました。(上述のコードのうち、引数の:nameより後ろの部分)
また、今回のようにoptionが2つある場合は、同じ{}内に記述する必要があります。

• OK { selected: 〇〇, include_blank: 〇〇}
• NG { selected: 〇〇}, {include_blank: 〇〇} → ArgumentErrorでした

修正したコード

3行目を修正しています

<div class="search-field">
  <%= f.label :occupation_id, "職種", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, {selected: @search_params[:occupation_id], include_blank: "選択しない"}, {class:"search-occupation"}) %>
</div>

おわりに

• 引数が多いhelperのため、まずは落ち着いてルールを確認したことでスムーズに解決出来ました。
• また、大元の検索機能はこちらの記事を参考にさせて頂きました。
• 初学者ゆえ、記事内に誤りがあるかもしれません。ご指摘等ありましたら、お手数ですがコメントを頂けると幸いです。