ドラッグ・アンド・ドロップを許可するようにファイル入力タイプをスタイルすることは可能ですか？

Question

見つかったthis example下記のように入力ボタンをクリックすると、ファイルエクスプローラが開きます。通常の入力のようにドラッグアンドドロップする機能をサポートする同様のボタンを使用できますか？

input[type="file"] { 
    display: none; 
} 
.custom-file-upload { 
    border: 1px solid #ccc; 
    display: inline-block; 
    padding: 6px 12px; 
    cursor: pointer; 
} 

<label for="file-upload" class="custom-file-upload"> 
    <i class="fa fa-cloud-upload"></i> Custom Upload 
</label> 
<input id="file-upload" type="file"/> 

Answer 1

はい、あなたの例では、ドラッグ＆ドロップすることができるという定期的な振る舞いを取り除く、noneへの実際の入力のdisplay属性を設定しています。

この例では、CSSとHTMLのみを使用して行うことができますが、不透明度を0に設定し、カスタムボタンの上にファイル入力をオーバーレイするのがベストだと思いますが、ちょっと不快です。 jQueryを使いこなす場合は、jQueryの使い方を見て、実際にどのファイルがアップロードされているかなどを実際に見せてください。

フィドル：http://jsfiddle.net/4cwpLvae/1042/

input[type="file"] { 
 
    display: inline-block; 
 
    opacity: 0; 
 
    position: relative; 
 
    top: -18px; 
 
} 
 
.custom-file-upload { 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    cursor: pointer; 
 
    width: 140px; 
 
    height: 25px; 
 
}

<label for="file-upload" class="custom-file-upload"> 
 
    <i class="fa fa-cloud-upload"></i> Custom Upload 
 
    <br> 
 
    <input placeholder="none" id="file-upload" type="file"/> 
 
</label>