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" /> 
<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; を設定しないで見てみると、つまりは下のような具合になっているわけですね。

input type="file" 要素のサイズは、font-size を指定してやることで変えることができます。

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

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

匿名

2016年5月25日 23:01

ばっちりな情報ありがとうございます！

freefielder.jp

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

カテゴリ:

タグ:

コメント

匿名