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

目前这只是一个按钮，如何添加一些CSS并自定义此按钮的外观（例如尺寸背景等）？ 谢谢

Answer 1

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

这是一些HTML示例：

 
 
  
 Select a file  

CSS将包装器div和按钮呈现为绝对定位的元素。 按钮是可见的并且样式化，而包含文件字段的包装器是透明的。 当你将鼠标hover在它上面以说明它相对于下面的样式按钮的位置时，我设置了包装器字段来降低透明度。

 #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视图模板中构建上述答案，如下所示：

 
 
 <%= f.file_field :photo %> 
  

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