Как настроить FileField wtforms в качестве кнопки изображения?

Question

Я пытаюсь загрузить изображение из папки проекта для использования в качестве значка вместо обычного "выбрать файл". Вот что я пробовал до сих пор. Не только изображение не загружено, старая кнопка отображается только пополам.

HTML

<div>{{ form.tweet_image(class="submit-image-tweet")}}</div>

CSS

.submit-image-tweet {
    background: url(../templates/images/camera_icon.png) no-repeat;
    cursor: pointer;
    border: none;
    width: 40px;
    height: 40px;
}

Answer 1

Один из самых простых способов - обернуть файл input в label и стиль, который вместо этого.

Кросс-браузерная спецификация по стилизации нативных элементов улучшается. Однако, если вам нужна пуленепробиваемая поддержка, это по-прежнему лучший способ.

.file{
  display:block;
  position: relative;
  width: 200px;
  height: 200px;
  background: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/device-camera-icon.png) no-repeat center center;
  background-size: cover;
}

.file input{
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

<label class="file">
  <input type="file"/>
</label>