定制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>