自定义简单表单 Collection_Select

Question

我有这个简单的表单，我希望能够使用 css 设置下拉菜单的样式。

input_html: { class: "form-dropdown" } 没有改变样式。我如何才能正确地将 class 添加到简单形式 collection_select 以在 css 中设置样式，或者是否有任何其他方法可以设置下拉菜单的样式？

这是我的简单表格：

<%= simple_form_for @document do |f| %>

    <%= f.collection_select :category_id, Category.all, :id, :name, {promt: "Choose a category" }, input_html: { class: "form-dropdown" } %>

    <%= f.input :title, label: "Title", label_html: { class: 'form-input' } %>

    <%= f.input :pdf, label: "Upload document:" %>

    <%= f.button :submit %>

<% end %>

Answer 1

离开 input_html: 这就是它不起作用的原因。像这样定义它：

<%= f.collection_select :category_id, Category.all, :id, :name, {promt: "Choose a category" }, { class: "form-dropdown" } %>

或

 <%= f.collection_select :category_id, Category.all, :id, :name, promt: "Choose a category", class: "form-dropdown" %>

Answer 2

<%= f.select :category_id, category_select_options, {prompt: "---Select Category---"}, required: :required, class: "form-control" %>

#
# In Appication Helper
#

def category_select_options
  Category.all.map{|c| [c.name,c.id] }
end

自定义简单表单 Collection_Select

Customising Simple Form Collection_Select

css

ruby-on-rails

simple-form