input[type=file]の機能を保ちつつCSSで装飾する方法

Web制作

• CSS
• input
• JavaScript

概要

input[type="file"]のデザインをCSSで好きなように装飾する方法。
<label>ではなく<button>を使用することで、focus可能かつEnterでの発火も可能となる。
ドラッグ&ドロップにも対応。

実践

素の状態

装飾無しの基本の状態。ドラッグ&ドロップにも対応。
特にこだわりが無ければそのまま使うのが楽で良い。

コード

<button>で好きなデザインを作る

ボタンを<button>に代行させ、元の<input>は隠す。

コード

ドラッグ&ドロップに対応させる

<button>にしたことでドラッグ&ドロップによるファイル取得が出来なくなるのでJavaScriptで対応させる。
ボタン以外にドロップゾーンを設けることも可能。

コード