デフォルトの input[type=file] ってなんか古臭い感じがしますよね？ とはいえ CSS でスタイリングしようとすると, デフォルトでかかってるスタイルが複雑でちょっとハードルが高かったりします.

そこで今回は『Dropify』という jQuery プラグインを使って input[type=file] をかっこ良くする方法について紹介します.

Runstant Demo

一見は百聞にしかずってことでデモです.

上のが default で, 下のが dropify を適応させたものです. 一目瞭然ですね♪

『Dropify』を知ったきっかけ

『phpspot開発日誌』さんのこちらのエントリーで

カッコ悪いinput[type=file]をモダンにしてドラッグ＆ドロップ対応にする「Dropify」:phpspot開発日誌

紹介されていて, 便利そうだったので使ってみました.

『Dropify』とは？

オフィシャルに

Override your input files with style

とあるように input[type=file] をかっこいいスタイルで上書きしてくれる jQuery プラグインです.

オプションでデフォルト値や最大ファイルサイズを指定したり, 背景画像を置いたりってことはもちろんのことドラッグ&ドロップにも対応してくれる優れものです!!

• Official
• Github

『Dropify』の使い方

使い方は簡単です.

1. dropify.css, dropify.js を読み込む

<link rel='stylesheet' href='http://cdn.rawgit.com/JeremyFagis/dropify/master/dist/css/dropify.css' />  
<script src='http://cdn.rawgit.com/JeremyFagis/dropify/master/dist/js/dropify.js'></script>  

2. dropify を適応させる input[type=file] を用意する

input[type=file] に dropify というクラスを付けているだけです.

<input type="file" class="dropify" data-default-file="url_of_your_file" />  

3. dropify() を実行

2 で作成した要素を jQuery で取得し, dropify() を実行

$('.dropify').dropify();

これだけでスタイルが上書きされてかっこ良くなります!!

『Dropify』の注意点

30 Oct 15 に追記.

@arayutw さんのツイートより

Dropifyはcssでwidth:100%にpaddingが付いているので注意。box-sizing加えるか何かすればおk。自分も使ってます。 https://t.co/b5955glkzf

— あらゆ (@arayutw) 2015, 10月 30

自分もこれ気づいて,でも Runstant ではデフォルトで box-sizing: border-box 付いてるから良いかなぁと思ったんですがやっぱり指摘されちゃいましたねw

そのうち本家に pull req でも送ろうかなぁと思ってます.

Reference

• http://phpspot.org/blog/archives/2015/10/inputtypefiledr.html