行为不同于 form_for 的简单表单

Question

Simple_form

<%= simple_form_for(@book, wrapper: :horizontal_form, wrapper_mappings: {
  }, html: { class: 'form-horizontal' }) do |f| %>
  <%= f.error_notification %>
  <div class="image-upload">
    <%= f.input :book_cover, as: :file , input_html: { class: 'fa fa-cloud-download'}%>
  </div>
    <%= f.input :category_id, collection: @categories, prompt: 'Select a category' %>
    <%= f.input :author %>
    <%= f.input :description %>

  <div class="d-flex">
    <div class="ml-auto">
      <%= f.button :submit %>
      <%= f.button :cancel, to: books_path %>
    </div>
  </div>
<% end %>

这是我的 simple_form 表单。我希望 f.input :book_cover 显示为图标 fa fa-cloud-download 而没有正常的下载按钮。

CSS。

.image-upload > input {
    display: none;
}

我有另一个表单在使用它（这只是一个常规 form_for 资源的 sn-p：

 <%= f.form_group :avatar, class: "row" do |f| %>
                  <%= f.label :avatar, class: "col-sm-4 col-form-label" %>
                  <div class="col-md-8">
                    <label class="image-upload form-control">
                      <i class="fa fa-cloud-download"></i>
                      <% if @user.avatar.present? %> <%= @user.avatar_file_name %>
                      <% end %>
                      <%= f.file_field :avatar %>
                      <%= f.error_messages %>
                    </label>
                  </div>
                <% end %>

似乎无法让我的 simple_form 仅使用图标。

编辑：上传图片以显示我的问题是什么以及它应该是什么样子

picture should look like this

Answer 1

SimpleForm 有一个input_field 方法，您可以使用它来代替input 仅呈现实际输入元素，而无需包装器 div 和标签。如果您想手动构建更复杂的结构，这会有所帮助。

<label class="col-sm-4 col-form-label">Book cover</label>
<div class="col-md-8">
  <label class="image-upload form-control">
    <i class="fa fa-cloud-download"></i>
    <%= f.input_field :book_cover %>
    <%= f.error_messages %>
  </label>
</div>