HTMLのデザインでいけてないのは入力系ではないでしょうか。特にファイルアップロードのフォームはダサいも良いところです。HTML5になってファイルをドラッグ&ドロップでアップロードできるようになったことでずいぶん良くなっています。 しかしデフォルトで格好良いわけではありません。自分でカスタマイズする必要があります。そこで使ってみたいのがDropifyです。

Dropifyの使い方

上が通常、下がDropifyを使った場合です。

デフォルトの画像を適用したり、ボックスの高さを指定することができます。

こちらは無効な場合。打ち消し線が良い感じです。

多言語対応もしています。

Dropifyを使えばファイルアップロードフォームが華麗に変身します。ドラッグ&ドロップはもちろん、プレビューも表示されます。その意味では画像に限定されるかと思いますが、積極的に使っていきたいライブラリです。

DropifyはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Dropify — Override your input files with style. JeremyFagis/dropify