如何将 wtforms 的 FileField 自定义为图像按钮？

Question

我正在尝试从项目的文件夹中加载图像以用作图标而不是正常的 "choose file"。到目前为止，这是我尝试过的。不仅图像没有加载，旧按钮只显示一半。

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 中并为其设置样式。

cross-browser 样式化本机元素的规范正在改进。但是，如果您需要 bullet-proof 支持，这仍然是最好的方法。

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

如何将 wtforms 的 FileField 自定义为图像按钮？

How to customize wtforms' FileField as an image button?

html

css

wtforms