ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞

input要素において、「確認する」ボタンを ＜input type = “image”＞ でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。

しかし、ファイルを選択するinput要素では、既にtype = “file”が設定されているため、少し工夫が必要になります！
今回は選択ボタンの画像やスタイルの変更をいくつかの方法でご紹介します。

【サンプル1】ボタンを画像に設定する

ボタンを画像にする方法について、
HTMLでは、input要素をlabel要素で囲みます。

<label id="sample1">
   <input type="file"/>
</label>

CSSでlabel要素に画像を設定します。
他にもサイズやポインタなど、スタイルを変更しておきましょう。

デフォルトでinput要素はボタンが出力されるので、display: none; で表示を消しておきます。

また、hoverの疑似クラスで別の画像を設定しておくと、少し動きが出ますね。

#sample1 {
    // サイズを設定
    height: 54px;
    width: 150px;

    // ボタンにする画像を設定
    background: url(../img/sample1.png) center center / contain no-repeat;

    // インラインボックスに設定
    display: inline-block;
    // マウスカーソルを当てた時、ポインタに設定
    cursor: pointer;
}

#sample1:hover {
    background: url(../img/sample1_hover.png) center center / contain no-repeat;
}

#sample1 input{
    // デフォルトのinputは出力なし
    display: none;
}

また、今回はサンプルなので簡単な画像なのですが、
この程度の画像の動きであればスタイルでも実現可能です。

ボタンのスタイルを変更

【サンプル2】<label>で囲んでスタイルを設定

先ほどの画像の設定と同様にinput要素をlabel要素で囲みます。

<label id="sample2">
   <input type="file"/>
</label>

続いて、今度はlabel要素をCSSで設定していきます。

#sample2 {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  background: #00BCD4;/*背景色*/
  color: #00BCD4;/*=背景色*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
  border-bottom: solid 2px #118e9e;
  border-radius: 4px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

#sample2:active {
  /*押したとき*/
  border-bottom: solid 2px #00BCD4;
  box-shadow: none;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}

#sample2 input{
    // デフォルトのinputは出力なし
    display: none;
}

【サンプル3】CSSとJavaScriptを使ってスタイルを変更

次はdiv要素でボタンを作成し、CSSで装飾を付けます。
input要素はサンプル2と同様、出力しないようにします。

<div id="sample3">ファイルを選択</div>
<input type="file" id="sample3_input"/>

#sample3 {
    position: relative;
    display: inline-block;
    padding: 0.75em 1.25em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

#sample3:active {
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}

#sample3 input{
    // デフォルトのinputは出力なし
    display: none;
}

JavaScriptでdiv要素をクリックしたときに、input要素をクリックしたイベントを呼び出します。
今回はJQueryで記述しています。

$(function () {
    $('#sample3').click(function() {
        $('#sample3_input').trigger('click');
    });
});

デモ

今までのサンプルそれぞれのデモです。
ボタンをクリックするとダイアログが表示されますが、ファイルを選択しても何も起こりません。

まとめ

今回はinput要素でファイル選択ボタンのスタイルを変更や、画像の設定を行いました。

ぜひ色々試してみてくださいね！