Ruby on rails 自定义rails中f.file.field的外观

目前这看起来就像一个按钮，我如何添加一些css和定制这个按钮的外观（如尺寸背景等）？感谢

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

下面是一些HTML示例：

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

jsfiddle上的示例

编辑：

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

#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;
}

---

如果我像你说的那样做，它会工作，但是在rails中我有

？我可以用ruby做类似的事情吗？或者，如何才能将文件输入识别为：photo？

#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;
}

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

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