How to customize wtforms' FileField as an image button?

问题

I'm trying to load an image from a project's folder to use as icon instead of the normal "choose file". Here's what I've tried so far. Not only the image isn't loaded, the old button is only displayed in half.

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

回答1:

One of the easiest ways is to wrap your file input into a label and style that instead.

The cross-browser spec on styling native elements is improving. However, if you need bullet-proof support, this is still the best way.

.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>

来源：https://stackoverflow.com/questions/41923138/how-to-customize-wtforms-filefield-as-an-image-button