Question

我试图从项目的文件夹中加载图像以用作图标而不是正常的＆＃34;选择文件＆＃34;。这是我到目前为止所尝试的内容。不仅没有加载图像，旧按钮只显示一半。

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>

如何定制wtforms＆＃39; FileField作为图像按钮？

1 个答案: