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

Ответ 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/

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>