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