ruby-on-rails - 在 rails 中自定义 f.file.field 的外观

Question

    <div id="photo_attachment_container">
        <%= f.file_field :photo %>
    </div>

目前这看起来像一个按钮，我怎样才能添加一些 CSS 并自定义这个按钮的外观（例如尺寸背景等）？谢谢

Answer 1

HTML 文件字段一直是并且仍然是最不可定制的 HTML 表单控件之一。另一个问题是它在浏览器和操作系统之间的呈现方式非常不同。设置这些控件样式的最佳方法是将文件控件呈现为另一个按钮或一组按您想要的样式设置的元素顶部的透明元素。文件控件不需要可见就可以通过用户单击激活，但它确实需要位于最顶层（在我的测试中发送单击或焦点事件不起作用）。

这是一些示例 HTML：

<div id="test">
    <div class="wrapper">
        <input type="file" />
    </div>
    <button>Select a file</button>
</div>

CSS 将包装器 div 和按钮呈现为绝对定位的元素。当包含文件字段的包装器是透明的时，按钮是可见的和样式的。当您将鼠标悬停在包装字段上时，我已将包装字段设置为降低透明度，以说明其相对于下方样式按钮的位置。

#test {
    position: relative;
}

#test .wrapper {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 2;
}

#test .wrapper:hover {
    opacity: 0.5;
}

#test button {
    background-color: #ccc;
    border: none;
    color: #666;
    padding: 3px 5px;
    border-radius: 5px;
    position: relative;
    top: 0;
    z-index: 1;
}

JS小提琴的例子。

http://jsfiddle.net/JgDuh/

编辑：

要回答您在评论中提出的问题，您可以在 Rails 视图模板中构建上述答案，如下所示：

<div id="photo_attachment_container">
  <div class="wrapper">
    <%= f.file_field :photo %>
  </div>
</div>

这将呈现为（请注意，我用作user您传入的任何模型的替代品form_for）：

<div id="photo_attachment_container">
  <div class="wrapper">
    <input type="file" id="user_photo" name="user[photo]" />
  </div>
</div>