настройка внешнего вида f.file.field в рельсах - PullRequest
Новая
       14

настройка внешнего вида f.file.field в рельсах

11 голосов
/ 12 августа 2011 
    <div id="photo_attachment_container">
        <%= f.file_field :photo %>
    </div>

В настоящее время это просто выглядит как кнопка, как я могу добавить немного CSS и настроить внешний вид (например, размер фона и т. Д.) Этой кнопки?Спасибо

1 Ответ

12 голосов
/ 12 августа 2011

Поле файла 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/

EDIT:

Чтобы ответить на вопрос, который вы задали в своем комментарии, вы должны структурировать приведенный выше ответ в шаблоне представления 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>
...