<input type=”file”>
ファイルアップロードボタンの装飾

フォームのファイルアップロードボタンを作る際に、<input type=”file”>を使用することがあるかと思います。
しかし、このボタンはそのまま装飾しようとしても、CSSだけではテキストの色を変えるなど、単純な装飾しかできず、ほとんど見た目を変えることができません。
これを装飾するには、<label>タグやjavascript等を使用してデザインを変更する必要があります。今回はその方法を紹介します。

デモ：http://marukin-ad.jp/maru_school/kuma/input/

方法1：<input>を<label>で囲い、<label>に対して装飾する

<label for="sample1">
   ファイルを選択
   <input type="file" id="sample1"/>
</label>

label {
     background: #000;
     color: #fff;
     cursor: pointer;
     padding: 15px 30px;
     margin: 0 10px 0 0;
     display: inline-block;
}
label input {
     display: none;
}

簡単に説明しますと、<input>を<label>で囲い、forを使い関連付けます。
そして、<input>をdisplay:none;で非表示にして、後は<label>に対して好きな装飾をするだけです。この方法を使えば、cssのみでとても簡単にデザインを変更できます。
background-imageを設定すれば、ボタンを画像にすることもできますし、角丸やグラデーションを使うことで様々な装飾が可能です。しかし、この方法では<input type=”file”>のデフォルト機能である、選んだファイル名を表示させることができません。表示させなくてもいいのであればこの方法でもいいですが、これがないと何を選択したかが後から確認できず、ユーザビリティもよくありませんので、あまりオススメできません。
この問題は、ちょっと手間がかかりますがjavascriptを使用することで解決できます。

方法2：javascriptを使用し、
デフォルト機能をそのままに装飾する

<div id="btn">ファイルを選択</div>
<input type="file" id="files"/>
<input type="text" id="filename" placeholder="選択されていません" readonly />

#btn {
    background: #000;
    color: #fff;
    cursor: pointer;
    padding: 15px 30px;
    display: inline-block;
}
input {
    background: none;
    box-shadow: none;
    border: none;
}

<script type="text/javascript">
 $(function() {
     $('#files').css({
         'position': 'absolute',
         'top': '-9999px'
     }).change(function() {
         var val = $(this).val();
         var path = val.replace(/\\/g, '/');
         var match = path.lastIndexOf('/');
	$('#filename').css("display","inline-block");
         $('#filename').val(match !== -1 ? val.substring(match + 1) : val);
     });
     $('#filename').bind('keyup, keydown, keypress', function() {
         return false;
     });
     $('#filename, #btn').click(function() {
         $('#files').trigger('click');
     });
 });
</script>

この方法では、<label>ではなく、<div>に対して装飾します。#btnか#filenameをクリックした時に、#filesをクリックした時と同じようにさせています。そして、選んだファイル名を、#filenameに反映させます。<input type=”text”>の値を書き換えられてしまうのを防ぐためにreadonlyと設定しましょう。
この方法であれば、cssのみで装飾する方法と比べて手間がかかりますが、デフォルトの機能をそのままに、自由にデザインを変えることができます。

まとめ

サイト制作の際に、お問い合わせフォームなどで使用する<input>タグですが、その中でも<input type=”file”>は装飾が大変です。そして、<input type=”file”>はデフォルトの見た目が地味なため、ボタンの見た目を変えたいという要望が多くなりがちです。
しかし上記のように、他のinputタグと比べて装飾にとても手間がかかりますし、デフォルトと同じような機能をつけようとすればjavascriptを使用しなくてはいけないので、ちょっと抵抗を感じるかもしれません。<input type=”file”>は他のフォーム機能と比べて使用頻度があまり高くないので、いざ使うとなった時に「どうやるんだっけ？」となることが多いと思います。そうなった時に、今回紹介した方法で、コーディングの手間を少しでも省いてもらえればと思います。

WEBプログラマー ／ K.S