input type="file" 要素のカスタマイズ。

HTMLでファイルの選択ダイアログを表示させるための INPUT 要素です。

<input type="file" />

この部品は、各ブラウザで大体こんなふうに表示されます。OSに依っても多少デザインが異なるかもしれません。

★Google Chrome


★Firefox


★Internet Explorer


★Opera


★iOS Safari


IE以外では、ボタン / テキストエリア / 「選択されていません」というテキスト部分 の何処をクリック(あるいはタップ)してもファイル選択ダイアログが開きます。IEだけは、ボタン部分はシングルクリック、テキストエリア部分はダブルクリックでダイアログが開きます。

こいつの見栄えをブラウザ間で統一して、IEでも必ずシングルクリックでダイアログを開かせたい。

とりあえず雑に作ってみると、こんな感じ? 下のボタンをクリックするとファイル選択ダイアログが開きます。(ファイルを選択しても何も起こりません)
Select File...

HTMLは…
<div id="openButton">  <!-- ボタン全体 -->
  <input id="file_input" type="file" />  <!-- input要素 -->
  <span id="openButtonLabel">Select File...</span>  <!-- ラベル文字列 -->
</div>
スタイルシートは…
#openButton{  /* ボタン全体 */
    position: relative;
    width: 300px;
    height: 50px;
    overflow: hidden;
    border-radius: 8px 8px 8px;
    box-shadow: 2px 2px 2px #aaa;
    background:url(http://freefielder.jp/pics/uploadicon.png) no-repeat 20px 0;
    background-color:steelblue;
    filter: progid:DXImageTransform.Microsoft.Shadow(Color='#aaaaaa', Direction=135, Strength=3);
        border:1px solid #333;
}

#file_input{  /* input要素 */
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    font-size:100px;
    opacity: 0;
    filter: alpha(opacity=0);
}

#openButtonLabel{  /* ラベル */
    position: absolute;
    bottom: 5px;
    left: 75px;
    font-size:20px;
    color: white;
    font-weight:bold;
}
  • ボタンとなる div を作る。
    これには overflow:hidden; を設定して、はみ出す部分を描画しないようにする。
  • その中に、でっかくした input 要素を絶対位置右下端決めで配置する。
  • input 要素は z-index を指定して前面に出してやり、クリックイベントを拾えるようにする。
  • 更に opacity:0; を指定して完全に透過させる。
その他のスタイルはお好みで。

overflow:hidden; や opacity:0; を設定しないで見てみると、つまりは下のような具合になっているわけですね。
inputfile_naked.png input type="file" 要素のサイズは、font-size を指定してやることで変えることができます。

input要素のボタン部分がdiv要素全体をカバーできる大きさになるように、input要素の font-size を調整します。そうすれば、IE でも必ずシングルクリックでファイルダイアログが開く、と。

で、あとは input要素に対するイベントを拾って、JavaScriptで何やらしてやればよいですね。

カテゴリ: