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

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

4

1 に答える 1

12

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

HTMLの例を次に示します。

<div id="test">
    <div class="wrapper">
        <input type="file" />
    </div>
    <button>Select a file</button>
</div>

CSSは、ラッパーのdivとbuttonを絶対位置の要素としてレンダリングします。ファイルフィールドを含むラッパーが透明である間、ボタンは表示され、スタイルが設定されます。ラッパーフィールドにカーソルを合わせると透明度が低くなるように設定して、下のスタイル付きボタンに対する相対的な位置を示しています。

#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>
于 2011-08-12T08:36:34.203 に答える