[Rails] If CSS is not applied in collection_select, check if class can be specified.

Introduction

――We will summarize what we discovered in the original application development for the sake of fixing and reminders.

Conclusion

--If you should be able to write CSS but there is no change, check the following --Is the class name correct? -Is the description displayed on the development tool? --Add {} to the option and HTML attributes of collection_select

Background

Thing you want to do

--I want to style the select box created with collection_select

Code created (wrong)

#erb file
<div class="search-field">
  <%= f.label :occupation_id, "Occupation", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, selected: @search_params[:occupation_id], include_blank: "Do not select", class:"search-occupation") %>
</div>

A part of the search form allows you to select from the occupation model. Please check the guide for specific usage of collection_select → Rails document

The following are specified as options. ・ Selected: → The value of @search_params is selected after the transition. -Include_blank: → The value of the initial state (not selected state) is specified.

There was a problem in the following places: I wrote the following CSS for class: search-occupation on the 3rd line, but it was not applied.

#scss file
.search-occupation {
    width: 100%;
    padding: 8px 8px 5px;
    outline: none;
}

When I checked with the development tools, I found that class:" search-occupation " could not be specified. (3rd line of image)

It means that CSS is disabled because the class cannot be specified in HTML. I referred to the following article for the correspondence. ActionView::Helpers::FormOptionsHelper [Rails] How to use select to create a select box with a complete understanding form Set class in f.select in rails

This correspondence

As I researched collection_select, I found that option and HTML attribute require{}. (In the above code, the part after the argument : name) Also, if there are two ** options like this time, they must be written in the same{}**.

• OK { selected: 〇〇, include_blank: 〇〇} --NG {selected: 〇〇}, {include_blank: 〇〇} → ArgumentError

Modified code

Correcting the 3rd line

<div class="search-field">
  <%= f.label :occupation_id, "Occupation", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, {selected: @search_params[:occupation_id], include_blank: "Do not select"}, {class:"search-occupation"}) %>
</div>

in conclusion

――Since the helper has many arguments, I was able to solve it smoothly by calmly checking the rules. ――For the original search function, I referred to this article. ――Because you are a beginner, there may be an error in the article. If you have any suggestions, we would appreciate it if you could comment.