ファイル送信フォームのUIを、アイコン(ボタン)表示に変えた例

input要素で作るファイル選択ボックスは、だいたい代表的なブラウザでは下図の上側(水色枠線の中)のような感じで表示されます。しかし、このファイル選択フォームの標準デザインだと、他の入力欄と並んで表示されているときにはちょっと分かりにくいんですよね。それに、このファイル選択フォームそのものをCSSを使って装飾したいと思っても、ボタン部分やファイル名表示部分を個別に装飾したりはできないので、イマイチ装飾しにくい問題もあります。

そんなときには、このファイル選択フォームそのものをアイコン化(ボタン化)して掲載する方法を使うと良さそうです。下図の下側のようにデザインすると（写真をアップロードする際には）ユーザにとっても分かりやすく使いやすいUIになるのではないでしょうか。

このようにファイルアップロード用のinput要素を装飾するには、HTMLにlabel要素などを加えた上でCSSを加えるだけで済みます。単に見た目を変更するだけであればJavaScriptは不要なので、HTML＋CSSだけで実現できて楽です。

以下に、ファイル選択フォームを簡単にボタンのように見せるHTML＋CSSの書き方をご紹介いたします。

ファイル送信フォームのUIをアイコン(ボタン)表示に変えるためのHTMLソース

まずは、HTMLソースを記述しましょう。

ここでは、form要素で作るフォームの中に、input要素で作るファイル選択ボックス(12行目)があるだけのシンプルな構成です。ただし、ファイル送信フォームのUIをアイコン(ボタン)表示に変えるためにlabel要素とspan要素を併用しています(7～10行目)。また、後からCSSを使って装飾するため、適宜class名やid名を割り振ってあります。

<form action="./filesend.cgi" method="post" enctype="multipart/form-data">
   <!-- ====================== -->
   <!-- ▼ファイル選択フォーム -->
   <!-- ====================== -->
   <label>
      <!-- ▽見せる部分 -->
      <span class="filelabel" title="ファイルを選択">
         <img src="camera-orange-rev.png" width="32" height="26" alt="＋画像">
         選択
      </span>
      <!-- ▽本来の選択フォームは隠す -->
      <input type="file" name="datafile" id="filesend">
   </label>
   <!-- ========== -->
   <!-- ▲ここまで -->
   <!-- ========== -->
</form>

ここでのポイントは、下記の3つあります。

▼ポイント1： ファイル選択フォームの代わりに、ラベルとして画像と文字を加える。

7～12行目では、ファイル選択フォームの代わりとして表示するための、ラベルとして画像と文字を加えています。

<span class="filelabel" title="ファイルを選択">
   <img src="camera-orange-rev.png" width="32" height="26" alt="＋画像">
   選択
</span>

ここではspan要素の中に、アイコン画像『』(8行目)と、ラベル文字『選択』(9行目)を加えています。
画像が不要なら文字だけでも構いませんし、文字はナシで画像だけにしても構いません。好きなように書いて下さい。
このspan要素に含まれる文字や画像が、ファイル選択フォームの代わりとして(後で追加するCSSによってボタン型に装飾されて)表示されます。

▼ポイント2： 本来のファイル選択フォームは非表示にする。

12行目には、本来のファイル選択フォームをinput要素で書いています。
これは後からCSSを使って非表示にします。そのため、ここでは単にid名を付加しているだけです。

※idではなくclassを使っても構いません。(別記事で紹介するJavaScriptと連動させる目的で、ここではidを使いました。)

▼複数ファイルを同時に選択可能にする方法

ちなみに、複数ファイルを選択可能にするには、input要素に属性multipleを加えます。

<input type="file" name="datafile" id="filesend" multiple>

▼ファイル選択可能なファイルの種類(拡張子)を限定する方法

また、選択可能なファイルを限定したい場合は、accept属性を使って拡張子やMIME TYPEを値に指定します。例えば下記は、JPEG・GIF・PNG画像に限定して選択可能にする記述です。カンマ区切りで、拡張子やMIME TYPEを指定しています。

<input type="file" name="datafile" id="filesend" multiple accept=".jpg,.gif,.png,image/gif,image/jpeg,image/png">

ただし、上記のaccept属性を使う方法でも、単に「ブラウザが表示するファイル選択ダイアログ」で「デフォルトで表示される種類」がJPEG・GIF・PNG画像になる、というだけであって、ユーザが自ら操作すれば、画像以外のファイルを選択することもできる点には注意が必要です。実際にアップロードされると困るデータは、サーバ側で捨てる処理が必要でしょう。(ここではそれは本題ではないので詳しい話は割愛します。)

▼ポイント3： label要素を使う。

label要素を使って全体を囲むのが最後のポイントです。(5～13行目)
こうすることで、本来のファイル選択フォームが非表示になっていても、ラベル部分にある画像や文字をクリックすることで、ファイル選択フォームをクリックしたのと同じ効果が得られます。

HTMLソースのポイントは以上です。
次に、CSSソースで装飾を加えましょう。

ファイル送信フォームのUIをアイコン(ボタン)表示に変えるためのCSSソース

次に、CSSソースを記述します。まずはCSSソース全部を先に掲載しておきます。配色などは完全に自由にすれば良いので、参考程度に見て下さい。

.filelabel {
   background-color: orange;  /* 背景色 */
   color: white;              /* 文字色 */
   border: 2px solid orange;  /* 枠線 */
   border-radius: 3em;        /* 角丸 */
   padding: 12px 9px;         /* 内側の余白 */
   display: inline-block;     /* インラインブロック化 */
}
.filelabel img {
   vertical-align: bottom;    /* 画像の垂直方向の配置 */
}
.filelabel:hover {
   opacity: 0.5;              /* 半透明 */
   border: 2px solid red;     /* 枠線(赤色) */
   cursor: pointer;           /* マウス形状(ポインタ) */
}
#filesend {
   display: none;  /* 本来のファイル選択フォームは非表示に */
}

上記のCSSソースのポイントをざっと解説しておきます。

• label要素で作るラベルをボタン形状に見せているのが、1行目～8行目です。
• ボタンの中にアイコン画像を加えているので、その配置のために9行目～11行目が必要です。画像を使わないならこの行はなくて構いません。
• label要素の上にマウスが載ったときの装飾変化を12行目～16行目に書いています。label要素はリンクではないため、そのままではマウスポインタの形状は変化しません。しかし、クリック可能であることを示すにはリンクと同じように形状が変化した方が分かりやすいでしょうから、cursorプロパティを使ってマウスポインタの形状を変えています。
• 本来のファイル選択フォームは非表示にしないと意味がないので、それを17行目～19行目に書いています。

CSSソースは以上です。
本来のファイル選択フォームを非表示にしている、17～19行目は必須です。それ以外は、好きなように書いて下さい。

ファイル送信フォームのUIをアイコン(ボタン)表示に変えた表示例

上記のHTML＋CSSソースを実際に表示すると、以下のように見えます。クリックすると、実際にファイル選択フォームが機能するはずです。（※どこにも送信はしません。）

選択

上記の『独自ボタン型ファイル選択フォーム』の動作サンプルは、以下のように動作するはずです。

• ボタンの上にマウスポインタが載ったら、枠線が付加されてボタンは薄くなる。
• ボタンがクリックされたら、(ブラウザの)ファイル選択フォームが表示される。

未選択状態なのか選択状態なのか

上記で紹介したHTML＋CSSだけで表示した状態では、ファイルが未選択状態なのか選択状態なのかが分かりません。このままだと、見た目は改善されても、動作が分かりやすいとは言い難いでしょう。
そこで、「ファイルが選択されているときには、ファイルのサムネイル画像が表示される」というような仕組みを合わせると分かりやすいフォームになります。ただし、その方法はJavaScriptを併用する必要がありますので、JavaScript Tipsコーナーに掲載した別の記事で解説しています。記事「ファイル送信フォームをアイコンに変えた上で、送信前に画像をプレビュー表示する方法」をご覧下さい。

以上、ファイル送信フォームのUIを、アイコン(ボタン)表示に変える方法でした。
ぜひ、使ってみて下さい。

(更新日：2018年03月02日)