如何将 wtforms 的 FileField 自定义为图像按钮? [英] How to customize wtforms' FileField as an image button?

问题描述

我正在尝试从项目的文件夹中加载图像以用作图标而不是普通的选择文件".这是我迄今为止尝试过的.不仅图像没有加载，旧按钮只显示一半.

HTML

{{ form.tweet_image(class="submit-image-tweet")}}

CSS

.submit-image-tweet {背景: url(../templates/images/camera_icon.png) 不重复；光标:指针；边界:无；宽度:40px；高度:40px；}

解决方案

最简单的方法之一是将您的文件 input 包装到一个 label 中并为其设置样式.

关于样式化原生元素的跨浏览器规范正在改进.但是，如果您需要防弹支持，这仍然是最好的方法.

.file{显示:块；位置:相对；宽度:200px；高度:200px；背景:url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/device-camera-icon.png) 无重复中心；背景尺寸:封面；}.文件输入{不透明度:0；位置:绝对；顶部:0；右:0；底部:0；左:0；光标:指针；}

<输入类型=文件"/></label>

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

解决方案

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>

这篇关于如何将 wtforms 的 FileField 自定义为图像按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！