dostosowywanie wyglądu pliku f.file.field w szynach

Question

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

Obecnie wygląda to jak przycisk, jak dodać css i dostosować wygląd tego przycisku (np. Wymiary tła itp.)? Dzięki

Answer 1

Pole pliku HTML było i pozostaje jednym z najmniej konfigurowalnych elementów sterujących formularza HTML. Drugi problem polega na tym, że jest on różnie renderowany między przeglądarkami i systemami operacyjnymi. Najlepszym stylem tych elementów sterujących jest renderowanie elementu sterującego jako przezroczystego elementu nad innym przyciskiem lub zestawem elementów, które są stylowane zgodnie z oczekiwaniami. Kontrola pliku nie musi być widoczna, aby zostać aktywowana za pomocą kliknięcia przez użytkownika, ale musi znajdować się na najwyższej warstwie (wysyłanie kliknięcia lub zdarzenia skupienia nie działają w moich testach).

Oto kilka przykładów HTML:

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

CSS renderuje div otoki i jako elementów pozycjonowanych bezwzględnie przycisk. Przycisk jest widoczny i stylizowany, natomiast opakowanie zawierające pole pliku jest przezroczyste. Ustawiłem pole zawijania, aby zmniejszyć przezroczystość, gdy najedziesz na niego kursorem, aby zilustrować jego położenie względem przycisku stylu pod spodem.

#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; 
} 

Przykład na skrzypce JS.

http://jsfiddle.net/JgDuh/

EDIT:

Aby odpowiedzieć na pytanie prosiłeś w swoim komentarzu, byś strukturze powyżej odpowiedź w swoim Rails zobaczyć szablon tak:

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

byłoby to uczynić jako (Zauważ, że użyłem user jako zamiennika dowolnego modelu, który minął w form_for):

<div id="photo_attachment_container"> 
    <div class="wrapper"> 
    <input type="file" id="user_photo" name="user[photo]" /> 
    </div> 
</div>