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