wtformsのFileFieldを画像ボタンとしてカスタマイズするには？

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

一つは、その代わりにlabelとスタイルにあなたのファイルinputをラップすることです。

スタイリングネイティブ要素のクロスブラウザ仕様が向上しています。ただし、防弾サポートが必要な場合は、これが最良の方法です。ウェブから画像リンクを使用して、URLの代わりに：

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