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

Question

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

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

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

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

我尝试将 anid应用于我的 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”）放在按钮下方，因为目前它占用了很多水平空间在我的页面上）。

这甚至可能吗？

————

我怎样才能使这项工作？

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