レールにf.file.fieldの外観をカスタマイズする

Question

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

現在のところ、これはちょうどボタンのように見えますが、このボタンの外観（例：寸法の背景など）をカスタマイズするにはどうすればよいですか？ありがとう

Answer 1

HTMLファイルフィールドは、HTMLフォームコントロールのうち最もカスタマイズ可能なものの1つです。もう1つの問題は、ブラウザとOSが大きく異なる点です。これらのコントロールのスタイルを設定する最善の方法は、ファイルコントロールを、別のボタンの上に透明な要素として、または必要なスタイルの要素のセットとしてレンダリングすることです。ファイルコントロールは、ユーザーのクリックでアクティブにするために表示する必要はありませんが、最上位のレイヤーにある必要があります（クリックイベントまたはフォーカスイベントを送信することはテストでは機能しません）。

ここではいくつかの例の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/

EDIT：

あなたのコメントで尋ねた質問に答えるために、あなたはあなたのRailsで上記の解答を構築でしょう。このようにテンプレートを表示：

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

これはとしてレンダリングされます（form_forに渡したモデルの代わりにuserを使用しました）。