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

Question

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

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

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

我想用自定义 CSS 设置 "choose a file button" 的样式。

我尝试将 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 本身的样式：

而且我仍然使用默认样式得到这个丑陋的按钮。

——————

UPDATE：如果无法对按钮本身进行样式设置，我想至少将 "no file chosen" 标签（法语中的 "aucun fichier choisi"）放在下面按钮，因为目前它在我的页面上占用了很多水平空间）。

这可能吗？

——————

我怎样才能使这个工作？

Answer 1

为什么文件输入旁边没有 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(); 
});

可能需要进行一些调整，但这应该能让您入门。

好机会！

Answer 2

这个有效：

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

同样：

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

您可以通过这种方式应用样式。但是同样，可点击的部分仍然是默认的灰色，并显示 "Choose File"。除此之外，请记住 HTML 文件字段是最不能自定义的字段之一，取决于您要花费多少努力。

Answer 3

这是我的解决方案：只需将表单域包裹在标签中并将其隐藏。没有javascript。

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

Answer 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)

结果：

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

Rails 4: how to apply custom CSS to Rails form file field

css

ruby-on-rails

forms

ruby-on-rails-4

filefield