Rails 4：如何将自定义 CSS 应用于 Rails 表单文件字段答案

【问题标题】：Rails 4: how to apply custom CSS to Rails form file fieldRails 4：如何将自定义 CSS 应用于 Rails 表单文件字段
【发布时间】：2015-10-09 00:54:50
【问题描述】：

我有一个 Rails 4 应用程序，它使用 Rails 的默认表单（我不使用简单表单）。

我的一个表单允许用户上传图片（感谢 Paperclip）：

<td>
  <%= f.file_field :image, value: "Choose a file" %>
</td>

我想用自定义 CSS 设置“选择文件按钮”的样式。

我尝试将id 应用到我的 td，如下所示：

<td id="upload_image">
  <%= f.file_field :image, value: "Choose a file" %>
</td>

然后我尝试使用以下 CSS 代码对其进行样式设置：

#upload_image input {
    background-color: #2c3e50;
    background-image: none;
    border: none;
    color: #FFF;
    padding: 5px 10px 5px 10px;
}

但这导致td 本身的样式：

我仍然得到这个带有默认样式的丑陋按钮。

————

更新：如果无法设置按钮本身的样式，我想至少将“未选择文件”标签（法语为“aucun fichier choisi”）放在按钮下方，因为在在我的页面上占用大量水平空间的那一刻）。

这可能吗？

————

我怎样才能做到这一点？

【问题讨论】：

标签： css ruby-on-rails forms ruby-on-rails-4 filefield

【解决方案1】：

这是我的解决方案：只需将表单字段包装在标签中并将其隐藏即可。没有 JavaScript。

<label class="btn btn-default btn-change-avatar">
    Upload new image
    <span style="display:none;">
      <%= form.file_field :avatar, id: "fileUploader"%>
    </span>
  </label>

【讨论】：

非常好！我尝试了这个例子，它对我来说效果很好。谢谢！

【解决方案2】：

这行得通：

<%= f.file_field :source, :class => "ui pink button" %>

同样：

<%= f.file_field :source, class: "ui purple button" %>

您可以通过这种方式应用样式。但同样，可点击部分仍将是默认灰色并显示“选择文件”。除此之外，请记住，HTML 文件字段是最不可定制的字段之一，这取决于您要花费多少精力来尝试。

【讨论】：

更好的答案是如何使用自己的 css 样式完全自定义上传按钮。
^^ 我将问题解释为如何使用帮助程序将自定义样式应用于字段，而不是使用什么特定的 css。

【解决方案3】：

为什么在文件输入旁边没有一个 div.... 和一些基本的 javascript

示例：

<td id="upload_image">
  <%= f.file_field :image, value: "Choose a file" %>
  <div>Aucun fichier choisi</div>
</td>

javascript 如下（使用 jQuery）：

$("#upload_image").on("change", "input", function(){
  if $(this).val() == ''
    $(this).closest("td").find("div").slideDown();
  else
    $(this).closest("td").find("div").slideUp(); 
});

可能需要做一些调整，但这应该可以帮助您入门。

好机会！

【讨论】：

嗯，问题是“Aucun fichier choisi”甚至不是一个 html 输出：它是由 Rails 表单助手为文件字段自动生成的。实际上，我不确定如何/在哪里可以编辑它。
请在此处查看SO条目，好像无法更改stackoverflow.com/questions/2317049/…
非常令人沮丧。但是非常感谢您的时间和帮助。

【解决方案4】：

上传照片按钮和删除按钮：

.d-flex.flex-row
  - if @user.image.attached?
    = link_to image_tag(@user.image.variant(resize_to_limit: [100, 100])), rails_blob_path(@user.image, disposition: 'attachment'), alt: 'user'
  - else
    = image_tag 'profile.png'
  .ms-4
    .d-flex.flex-row
      label.btn.btn-primary
        | Upload Photo
        = image_tag 'Icon-Color.svg', alt: 'icon', class: 'ps-3'
        .d-none
          = f.file_field :image
      .ps-3
        - if @user.image.attached?
          = link_to registration_path({ user: { id: @user.id }, purge: true }), method: :put, local: true, class: 'btn btn-primary' do
            = image_tag 'Trash.svg', alt: 'icon'
    .mt-1.small Up to 1 MB (300x300 px)

结果：

【讨论】：